这是一款支持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
