Lightbox/弹窗
Enlarge 支持移动手机端放大镜插件
PetitQ
收藏
enlarge.js 是一款支持移动手机的响应式 jquery 放大镜插件。该 jquery 放大镜插件在移动手机上通过长按图片，可以调出放大镜，对图片进行放大查看。它的特点还有：
支持内部放大镜和外部放大镜模式
也想出现在这里？联系我们吧
支持圆形放大镜特效
自动根据屏幕尺寸来调用适合屏幕尺寸的图片
通过鼠标或触摸设备长按来调出放大镜
允许设置放大镜的等级
使用方法
在页面中引入 jquery 和 enlarge.js、enlarge.init.js 文件,以及放大镜插件样式文件 enlarge.css。
<link rel="stylesheet" href="css/enlarge.css">
<script src="js/jquery.min.js"></script>
<script src="js/enlarge.js"></script>
<script src="js/enlarge.init.js"></script>
HTML 结构
按照下面的 HTML 结构来添加你需要放大的图片。
<div class="enlarge_pane_contain">
<div class="enlarge_pane">
<div class="enlarge inline-demo">
<div class="enlarge_contain">
<img src="1.jpg"
srcset="1.jpg 480w, 1.jpg 1200w, 1.jpg 2000w"
sizes="100vw"
id="test-img">
</div>
<a href="1.jpg" class="enlarge_btn" title="Toggle Zoom">Toggle Zoom</a>
</div>
</div>
</div>
该 jquery 放大镜插件会根据屏幕尺寸，从 srcset 属性中选择一张合适的图片来显示。如果 srcset 和 sizes 属性都没有设置，那么超链接的 href 属性指向的是大图的地址。
初始化插件
在页面 DOM 元素加载完毕之后，可以通过下面方法来初始化该 jquery 放大镜插件。
(function( $ ){
$( function(){
$(".enlarge.inline-demo").data("options", {
// 配置参数});
$( document ).bind( "enhance", function(){
$( "body" ).addClass( "enhanced" );
});
$( document ).trigger( "enhance" );
});
}( jQuery ));
配置参数
enlarge.js jquery 放大镜插件的可用配置参数如下：
$(".enlarge.inline-demo").data("options", {
button: true,
hoverZoomWithoutClick: true,
delay: 300,
flyout: {
width: 300,
height: 300
},
placement: "flyoutloupe", // or inline
magnification: 3
});
Github 地址：https://github.com/filamentgroup/enlarge
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
