支持移动手机的jquery放大镜插件enlarge.js

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
});
                  
                

enlarge.js jquery放大镜插件的github地址为：https://github.com/filamentgroup/enlarge