fastadmin 框架中图片点击放大

fastadmin的原生图片预览,重新打开一个窗口太麻烦,使用layui做一个弹窗式的图片预览

效果如下:
在这里插入图片描述

点击放大:
在这里插入图片描述

第一步:在backend-init.js文件中添加如下代码:

在这里插入图片描述

    $('body').on('click', '[data-tips-image]', function () {var img = new Image();var imgWidth = this.getAttribute('data-width') || '500px';img.onload = function () {var $content = $(img).appendTo('body').css({background: '#fff', width: imgWidth, height: 'auto'});Layer.open({type: 1, area: imgWidth, title: false, closeBtn: 1,skin: 'layui-layer-nobg', shadeClose: true, content: $content,end: function () {$(img).remove();},success: function () {}});};img.onerror = function (e) {};img.src = this.getAttribute('data-tips-image') || this.src;});

第二步:页面的img标签中添加 data-tips-image,点击时自动弹出图片预览

<img src="" data-tips-image  alt="">

到此点击图片放大效果就完成了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/125447.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java进行多线程编程?(lambda表达式~)

本文标题&#xff1a;Java进行多线程编程&#xff1f;那么&#xff0c;Java为啥不学学如何进程多进程编程呢&#xff1f;&#xff1f;原因在于&#xff1a;Java圈子中不提倡多进程编程~~ 接下来&#xff0c;我们来写一个最为基础/入门的HelloWord程序来感受如何进行多线程~~ J…

leetcode:58. 最后一个单词的长度

题目&#xff1a; 函数原型&#xff1a; int lengthOfLastWord(char * s) 解析&#xff1a; 求最后一个单词的长度&#xff0c;我们有两种思路 第一种思路&#xff1a; 逆向求&#xff0c;先设置一个字符串下标index&#xff0c;定位到最后一个单词的最后一个字符。再一个设置长…

微服务-kubernetes安装

文章目录 一、前言二、kubernetes2.1、Kubernetes (K8S) 是什么2.1.1、主要特性&#xff1a;2.2.2、传统部署方式&#xff1a;2.2.3、虚拟机部署2.2.4容器部署2.2.5什么时候需要 Kubernetes2.2.6、Kubernetes 集群架构 三、kubernetes安装3.1、主节点需要组件3.1.1、设置对应主…

Mybatis传递实体对象只能直接获取,不能使用对象.属性方式获取

mybatis的自动识别参数功能很强大&#xff0c;pojo实体类可以直接写进mapper接口里面&#xff0c;不需要在mapper.xml文件中添加paramType,但是加了可以提高mybatis的效率 不加Param注解&#xff0c;取值的时候直接写属性 //这里是单参数&#xff0c;可以不加param&#xff01…

Node.js 操作百度网盘实现文件上传(小文件上传,大文件分片上传)

Node.js 操作百度网盘实现文件上传&#xff08;小文件上传&#xff0c;大文件分片上传&#xff09; 前提准备&#xff1a;获取百度网盘的授权码 https://pan.baidu.com/union/doc/al0rwqzzl const fs require(fs); const crypto require(crypto); const path require(pat…

扫地僧万能HTML模板站群:打造高效便捷的网站建设利器

扫地僧万能HTML模板站群是一款功能强大的网站建设工具&#xff0c;以其独特的特点和卓越的性能在网络开发领域广受赞誉。本文将介绍扫地僧万能HTML模板站群的几大特点&#xff0c;包括模板自动处理、一站管理、泛站独立、多套模板、蜘蛛统计、超强自定义、超强负载、简单高效、…

Achronix与您相约“2023全球AI芯片峰会”

2023全球AI芯片峰会&#xff08;GACS 2023&#xff09;将于9月14-15日在深圳市深圳湾万丽酒店举行。峰会由智一科技旗下芯东西联合智猩猩&#xff08;智东西公开课全新品牌&#xff09;联合发起主办&#xff0c;以「AI大时代 逐鹿芯世界」为主题。 届时&#xff0c;Achronix将…

【docker快速部署微服务若依管理系统(RuoYi-Cloud)】

工作原因&#xff0c;需要一个比较完整的开源项目测试本公司产品。偶然发现RuoYi-Cloud非常适合&#xff0c;它有足够多的中间件&#xff0c;而且官方提供docker安装&#xff0c;但我本人在安装过程中遇到了很多坑&#xff0c;在这里记录一下防止下次会再次遇到。 项目地址 ht…

表单引擎的自定义控件的概念与设计

基本概念 概述 控件的定义&#xff1a;用于展示或者采集数据的表单元素&#xff0c;称为控件,比如&#xff1a;文本框、下拉框、单选按钮、从表等.自定义控件&#xff1a;表单引擎提供的基础控件之外的控件称为自定义控件, 这些控件由开发人员自己定义&#xff0c;比如&#…

导入jdk源码并进行使用

jdk下载地址 JDK1.8源码下载地址 idea打开jdk项目 打开项目结构&#xff0c;进入SDK这一栏&#xff0c;选择一个使用的jdk&#xff0c;选择jdk的类路径 将类路径进行删除&#xff0c;并且添加我们自己下载的jdk中的src文件夹到类路径

Nodejs+vue+mysql网上药店购药系统 9h2k5

本毕业设计的内容是设计并且实现一个基于vue.js框架的空巢老人购药系统。采用MYSQL为数据库开发平台&#xff0c;nodejs语言&#xff0c;网络信息服务作为应用服务器。空巢老人购药系统的功能已基本实现&#xff0c;主要用户、家属、养生知识、药品信息、身体信息等。 论文主要…

海外ASO优化之如何优化游戏应用

如果我们发布了一款手机游戏或者管理了一款手机游戏&#xff0c;那么需要确保我们的手机游戏对合适的人可见&#xff0c;目的是增加应用的下载量。 1、优化游戏元数据的关键词。 Apple和Google在应用商店中为我们提供有限的空间&#xff0c;来描述手机游戏及其优势。我们需要使…

安防监控/视频汇聚/云存储/AI视频智能算法引擎系统:遛狗检测算法详解

根据最新修订发布的《中华人民共和国动物防疫法》规定&#xff1a;遛狗不栓绳&#xff0c;养狗不办证、未定期接种疫苗等行为都是违法行为。作为一个合格的“铲屎官"出门遛狗一定要牵好狗绳&#xff0c;保护他人和爱犬的安全。但就算法律明文规定&#xff0c;还是有很多人…

Android SDK 上手指南||第十一章 虚拟与物理设备

第十一章 虚拟与物理设备 在之前的文章里&#xff0c;大家已经了解了Android项目当中的基本元素、接触了用户界面的设计以及数据存储方案。接下来&#xff0c;我们将一同探索如何在物理及虚拟设备上运行自己的应用程序并与之互动。在系列文章的下一篇中&#xff0c;我们将分步…

SQL函数

函数 字符串函数数值函数日期函数流程函数 字符串函数 常用函数&#xff1a; 函数功能CONCAT(s1, s2, …, sn)字符串拼接&#xff0c;将s1, s2, …, sn拼接成一个字符串LOWER(str)将字符串全部转为小写UPPER(str)将字符串全部转为大写LPAD(str, n, pad)左填充&#xff0c;用…

【Unity3D赛车游戏优化篇】新【八】汽车实现镜头的流畅跟随,以及不同角度的切换

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

【自动化测试】之PO模式介绍及案例

目录 概念 PO三层模式&#xff1a; 1. 构建基础的 BasePage 对象层 2. 构建首页的 Page 层&#xff08;操作层&#xff09; 3.构建业务层 常用断言方法&#xff1a; 4. 构建用例集&#xff0c;执行文件&#xff0c;输出自动化测试报告 测试报告模板 概念 PO&#xff08…

webhook--详解(gitee 推送)

一、简介 webhook 是一种基于 HTTP 的回调函数&#xff0c;可在 2 个应用编程接口&#xff08;API&#xff09;之间实现轻量级的事件驱动通信。是一种新型的前后端交互方式&#xff0c;一种对客户端-服务器模式的逆转&#xff0c;在传统方法中&#xff0c;客户端从服务器请求数…

Vue3---uni-app--高德地图引用BUG

先给报错信息&#xff1a;module libs/map//libs/map_min.js is not defined, require args is /libs/map_min.js 查看我引用方法&#xff1a; 本人查阅资料发现 是 require 使用的是 commonJS方式引用说这个适配Vue2可我项目是Vue3应该使用ES6语法糖 然后我有跑了项目发现BU…

Excel数学、工程和科学计算插件:FORMULADESK Studio

如果 Excel 是您的武器 - 让我们磨砺您的剑&#xff01;为整天使用 Excel 的人们提供创新的 Excel 加载项&#xff0c;你需要这个 FORMULADESK Studio。。。 Excel 插件为任何使用 Excel 执行数学、工程和科学计算的人提供了必备工具。 * 将公式视为真正的数学方程 * 为您的公…