magnifierrentgen（放大镜）插件的使用
效果图如下：
1.引入jQuery和jQuery.MagnifierRentgen.min.js以及jQuery.MagnifierRentgen.min.css
<!-- 引入css --><link rel="stylesheet" href="./jQuery.MagnifierRentgen.min.css"><!-- 引入js --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="./jQuery.MagnifierRentgen.min.js"></script>
2.该放大镜插件有2个图层，上面的为原图，使用data-image属性来指定，下面的是放大的图片，使用data-image-zoom属性来指定，结构如下：
<div class="test-plugin" data-image="./img.jpg" data-image-zoom="./img.jpg" data-size="150"></div></div>
3.在页面DOM元素加载完毕之后，可以通过magnifierRentgen()方法来初始化该图片放大镜插件
<script>$(".test-plugin").magnifierRentgen();</script>
备注：
若需修改放大镜的样式，可在jQuery.MagnifierRentgen.min.css里面搜索关键字border-radius或者border来进行快速查找类名或者id名从而进行样式修改（修改放大镜的类名为magnifier-loupe）
修改后的样式：
<style>.magnifier-loupe{border-radius: 0 !important; /* 样式不生效则添加上!important */border:1px solid #fff !important;}</style>
magnifierrentgen（放大镜）插件的使用相关推荐
- [vue插件]基于vue2.x的电商图片放大镜插件
最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下.小白第一次分享,各位大神莫见笑. vue ...
- 介绍一个十分好用的JQUERY图片放大镜插件
介绍一个十分好用的JQUERY图片放大镜插件 介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图, 传统的另外打开一张大图的话,不大COOL, ...
- html放大镜移动,支持移动手机的jquery放大镜插件enlarge.js
enlarge.js是一款支持移动手机的响应式jquery放大镜插件.该jquery放大镜插件在移动手机上通过长按图片,可以调出放大镜,对图片进行放大查看.它的特点还有: 支持内部放大镜和外部放大镜模 ...
- 淘宝放大镜插件（vue-piczoom）
Build Setup 使用步骤 # 安装 install npm install vue-piczoom --save # 使用 use --script import PicZoom from ' ...
- vue仿淘宝放大镜插件 vue-piczoom的使用问题
vue仿淘宝放大镜插件 vue-piczoom npm install vue-piczoom--save //下载放大镜插件 使用的话就是直接引入 import picZoom from 'vue- ...
- jquery图片放大镜插件—jqzoom
说明:在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大镜的效 ...
- JavaScript放大镜插件magnifier实现图像放大效果
原文:JavaScript放大镜插件magnifier实现图像放大效果 源代码下载地址http://www.zuidaima.com/share/1801078585658368.htm magnif ...
- vue-piczoom 基于vue2.x的电商图片放大镜插件
vue-piczoom 基于vue2.x的电商图片放大镜插件 使用步骤 #安装 install npm install vue-piczoom --save // 使用 import PicZoom ...
- vue-piczoom：基于vue2.x的电商图片放大镜插件
最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下.小白第一次分享,各位大神莫见笑. vue ...
- jQuery图片放大镜插件
运行效果: 代码编辑: <html lang="zh"> <head><meta charset="UTF-8"><m ...
最新文章
- 高级流程图_数据收集方法之流程图
- 基于javafx的五子棋_基于JavaFX的SimpleDateFormat演示程序
- Java Byte类的hashCode（）方法及示例
- 解决 maps to localhost, but this does not map back to the address
- spring事务的传播性的理解
- Jenkins+GitHub+Xcode+fir搭了一个持续集成环境
- python numpy数据类型_Python中numpy的数据类型,python,dtype
- umount device is busy
- mysql如何用sql增加字段和注释？
- WPS简历模板的图标怎么修改_个人简历怎么做？个人求职简历模板
- python翻转棋_Python算法做翻转棋子游戏
- echarts模仿excel复合饼图（饼-饼）
- C盘哪些文件可以删除？windows7瘦身攻略
- Debian本地源的创建及应用
- 涛涌天际，水利万物：黄浦江畔读懂城市智能体
- oracle存储过程批量导入数据,Oracle 存储过程之批量添加数据
- python-docx在word中表格添加表格
- 做网站懒得备案 海外云服务器你要懂得怎么选！
- 计算机网络建设中涉及到哪些硬件,网络基础知识入门
- Mondrian in Action