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

创客云


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

使用方法

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

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

HTML结构

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

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

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

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

  1. <img src="product.jpg"
  2.      data-large="full.jpg"
  3.      data-title="tooltip Title"
  4.      data-help="help Text"
  5.      data-text-bottom="Bottom Text"
  6.      alt="Image To Zoom"
  7.      class="example"
  8. >

初始化插件

  1. $(function(){
  2.   $(".example").imagezoomsl();
  3. });

在图片加载时显示loading。

  1. $(".example").imagezoomsl({
  2.  
  3.   // loading spinner
  4.   loadinggif: 'loading.gif',
  5.  
  6.   // opacity
  7.   loadopacity: 0.1,
  8.  
  9.   // background color
  10.   loadbackground: '#878787'
  11.  
  12. });

自定义描述文本样式。

  1. $(".example").imagezoomsl({
  2.  
  3.   showstatus: true,
  4.   showstatustime: 2000,
  5.   statusdivborder: '1px solid black',
  6.   statusdivbackground: '#C0C0C0',
  7.   statusdivpadding: '4px',
  8.   statusdivfont: 'bold 13px Arial',
  9.   statusdivopacity: 0.8,
  10.   textdnbackground: '#fff',
  11.   textdnpadding: '10px',
  12.   textdnfont: '13px/20px cursive'
  13.  
  14. });

自定义放大图片动画。

  1. $(".example").imagezoomsl({
  2.  
  3.   scrollspeedanimate: 5 , 
  4.   zoomspeedanimate: 7,
  5.   loopspeedanimate: 2.5,   
  6.   magnifierspeedanimate: 350
  7.  
  8. });

自定义CSS选择器。

  1. $(".example").imagezoomsl({
  2.  
  3.   classmagnifier: "magnifier",
  4.   classcursorshade: "cursorshade",
  5.   classstatusdiv: "statusdiv",
  6.   classtextdn: "textdn",
  7.   classtracker: "tracker"
  8.  
  9. });

配置参数

  1. $(".example").imagezoomsl({
  2.  
  3.   // shows the magnifying glass container
  4.   cursorshade: true,
  5.  
  6.   // cursor type
  7.   magnifycursor: 'crosshair',
  8.  
  9.   // background color of the magnifying glass container
  10.   cursorshadecolor: '#fff', 
  11.  
  12.   // opacity of the magnifying glass container
  13.   cursorshadeopacity: 0.3,
  14.  
  15.   // border styles
  16.   cursorshadeborder: '1px solid black',
  17.  
  18.   // z-index property
  19.   zindex: '', 
  20.  
  21.   // zoom step
  22.   stepzoom: 0.5,
  23.  
  24.   // zoom range  
  25.   zoomrange: [2, 2], 
  26.  
  27.   // start zoom level
  28.   zoomstart: 2,
  29.  
  30.   // disables the scrolling of the document with the mouse wheel when the cursor is over the image
  31.   disablewheel: true
  32.  
  33. });

Github网址:https://github.com/mtvphnx/zoomsl

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/47137.html
云模板

发表评论