这是一款支持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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!