js放大镜的使用

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

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

2.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({

   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

  });