在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

jquery支持移动端放大镜

分类:插件代码 更新时间:2018-03-29 浏览次数:342

代码简介

enlarge.js是一款支持移动手机的响应式jquery放大镜插件。该jquery放大镜插件在移动手机上通过长按图片,可以调出放大镜,对图片进行放大查看。

浏览器兼容

Chrome Firefox Opera Safari IE9+

使用方法

enlarge.js是一款支持移动手机的响应式jquery放大镜插件。该jquery放大镜插件在移动手机上通过长按图片,可以调出放大镜,对图片进行放大查看。它的特点还有:

  • 支持内部放大镜和外部放大镜模式。
  • 支持圆形放大镜特效。
  • 自动根据屏幕尺寸来调用适合屏幕尺寸的图片。
  • 通过鼠标或触摸设备长按来调出放大镜。

  • 允许设置放大镜的等级

在页面中引入jquery和enlarge.js、enlarge.init.js文件,以及放大镜插件样式文件enlarge.css。

<linkrel="stylesheet"href="css/enlarge.css">
<scriptsrc="js/jquery.min.js"></script>
<scriptsrc="js/enlarge.js"></script>                 

<scriptsrc="js/enlarge.init.js"></script>  


按照下面的HTML结构来添加你需要放大的图片。

<divclass="enlarge_pane_contain">
  <divclass="enlarge_pane">
    <divclass="enlarge inline-demo">
      <divclass="enlarge_contain">
        <imgsrc="1.jpg"
             srcset="1.jpg 480w, 1.jpg 1200w, 1.jpg 2000w"
             sizes="100vw"
             id="test-img">
      </div>
      <ahref="1.jpg"class="enlarge_btn"title="Toggle Zoom">Toggle Zoom</a>
    </div>
  </div>
</div>   


在页面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
});

问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!