先容一个异常好用的JQUERY图片放大镜插件,在许多电子商务网站中,偶然在看小图时,每每想再看这个货物的大图,
传统的其它打开一张大图的话,不大COOL,以是找到了这个插件,
插件下载地点:
http://www.mind-projects.it/projects/jqzoom/
简朴先容下,在下载后,
要筹备一张小图和一张清楚点的大图,然后在页面中引入JQUERY和这个插件的JS
<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
然后再引入一个CSS
<link rel="stylesheet" href="../css/jqzoom.css" type="text/css">
接着是两张大图和小图
<a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki"> <img src="kawasakigreen_small.jpg" border="0" style="border: 1px solid #666;" title="kawasakigreen"></a>
这里留意的是一张大图,一张小图,而且"kawasakigreen_small.jpg"这个小图中,谁人title是要呈此刻放大镜里的笔墨问题
然后在JS中:
Copy to Clipboard引用的内容:[www.veryhuo.com]
<script type="text/javascript"> $(function() { var options3 = { zoomWidth: 200, zoomHeight: 200, xOffset: 20, title: false, lens:false } $(".jqzoom").jqzoom(options3); }); </script>
这里就是放大镜的结果了,详细的文档和例子请参考
http://www.mind-projects.it/projects/jqzoom/demos.php#demo1 (编辑:河北网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|