支持6种放大模式的jQuery图片放大镜插件

这是一款支持6种放大模式的jQuery图片放大镜插件。该图片放大镜支持ie8，内置6种炫酷的图片放大效果，可以满足各种网站的图片放大效果需求。

使用方法

在页面中引入下面的文件。

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/zoomsl.min.js"></script>
                

HTML结构

<img src="product.jpg" alt="Image To Zoom" class="example">
                

可以通过data-large属性来设置大图。

<img src="product.jpg" data-large="full.jpg" alt="Image To Zoom" class="example">                  
                

还可以设置放大图片的描述信息。

<img src="product.jpg" 
     data-large="full.jpg" 
     data-title="tooltip Title" 
     data-help="help Text" 
     data-text-bottom="Bottom Text" 
     alt="Image To Zoom" 
     class="example"
>               
                

初始化插件

$(function(){
  $(".example").imagezoomsl();
});
                

在图片加载时显示loading。

$(".example").imagezoomsl({

  // loading spinner
  loadinggif: 'loading.gif',

  // opacity
  loadopacity: 0.1,

  // background color
  loadbackground: '#878787'
  
});
                

自定义描述文本样式。

$(".example").imagezoomsl({

  showstatus: true,
  showstatustime: 2000,
  statusdivborder: '1px solid black',
  statusdivbackground: '#C0C0C0',
  statusdivpadding: '4px',
  statusdivfont: 'bold 13px Arial',
  statusdivopacity: 0.8,
  textdnbackground: '#fff',
  textdnpadding: '10px',
  textdnfont: '13px/20px cursive'

});
                

自定义放大图片动画。

$(".example").imagezoomsl({

  scrollspeedanimate: 5 , 
  zoomspeedanimate: 7,
  loopspeedanimate: 2.5,   
  magnifierspeedanimate: 350

});
                

自定义CSS选择器。

$(".example").imagezoomsl({

  classmagnifier: "magnifier",
  classcursorshade: "cursorshade",
  classstatusdiv: "statusdiv",
  classtextdn: "textdn",
  classtracker: "tracker"

});
                

配置参数

$(".example").imagezoomsl({

  // shows the magnifying glass container
  cursorshade: true,

  // cursor type
  magnifycursor: 'crosshair',

  // background color of the magnifying glass container
  cursorshadecolor: '#fff', 

  // opacity of the magnifying glass container
  cursorshadeopacity: 0.3,

  // border styles
  cursorshadeborder: '1px solid black',

  // z-index property
  zindex: '', 

  // zoom step
  stepzoom: 0.5,

  // zoom range  
  zoomrange: [2, 2], 

  // start zoom level
  zoomstart: 2,

  // disables the scrolling of the document with the mouse wheel when the cursor is over the image
  disablewheel: true

});                  
                

该支持6种放大模式的jQuery图片放大镜插件的github网址为：https://github.com/mtvphnx/zoomsl