当前位置： 旋风说(旋风PHPer分享网)> 技术文章> 正文
插件 下载地址：
https://www.22vd.com/download/36106.html
exzoom 是一款 jquery 商城商品放大镜插件。该 jquery 放大镜插件,自带缩略图导航和自动播放功能,也提供了手动修改大图的方法。
使用方法
在页面中引入 jquery 和 jquery.exzoom.js 和 jquery.exzoom.css 文件。
<link href="dist/css/jquery.exzoom.css" rel="stylesheet"> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="js/jquery.exzoom.js"></script>
HTML 结构
该 jquery 放大镜的 HTML 结构如下：
<div class="exzoom" id="exzoom"> <!--大图区域--> <div class="exzoom_img_box"> <ul class='exzoom_img_ul'> <li><img src="images/photos/img01.jpg"/></li> <li><img src="images/photos/img02.jpg"/></li> <li><img src="images/photos/img03.jpg"/></li> <li><img src="images/photos/img04.jpg"/></li> <li><img src="images/photos/img05.jpg"/></li> <li><img src="images/photos/img06.jpg"/></li> <li><img src="images/photos/img07.jpg"/></li> <li><img src="images/photos/img08.jpg"/></li> </ul> </div> <!--缩略图导航--> <div class="exzoom_nav"></div> <!--控制按钮--> <p class="exzoom_btn"> <a href="javascript:void(0);" class="exzoom_prev_btn"> < </a> <a href="javascript:void(0);" class="exzoom_next_btn"> > </a> </p> </div>
初始化 插件
在页面 DOM 元素加载完毕之后，通过 exzoom()方法来初始化该 jquery 放大镜插件。
$("#exzoom").exzoom();配置参数
该 jquery 放大镜插件的可用配置参数如下：
defaults = {
"navWidth": 60,//列表每个宽度,该版本中请把宽高填写成一样
"navHeight": 60,//列表每个高度,该版本中请把宽高填写成一样
"navItemNum": 5,//列表显示个数
"navItemMargin": 7,//列表间隔
"navBorder": 1,//列表边框，没有边框填写0，边框在css中修改
"autoPlay": true,//是否自动播放
"autoPlayTimeout": 2000,//播放间隔时间
};
当您发现内容错误或代码bug，以及下载链接无法使用等，请点击屏幕右下角的上报错误来进行提交，我们会尽快修正。
本程序所有源码和工具完全免费，当本网站内容如果侵犯了您的权益，请联系我们，我们会尽快处理，感谢您的合作。
上一篇： PHP各种正则匹配
相关文章
评论：
文明上网理性发言，请遵守 新闻评论服务协议
上报错误
