图片模拟放大镜插件 v1.0
注意:在网页头部引用jQuery和agilebins和abPicZoom三个必需的js,这三个文件包含在head标签中或位于关闭正文标记之前。确保在abPicZoom之前有agilebins,agilebins之前有jquery顺序不能乱。
1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>domo-abPicZoom演示例子</title>
6. <script type="text/javascript" src="js/jquery.min.js"></script> <!-- 必须存在1 -->
7. <script type="text/javascript" src="js/jquery.agilebins-v1.0.4.min.js"></script> <!-- 必须存在2 -->
8. <script type="text/javascript" src="js/jquery.abPicZoom.min.js"></script> <!-- 必须存在3 -->
9. </head>
10. <body>
注意:创建一个div的父层,如此例子abPicZoom-preview。在其内部为每一个幻灯片创建一个目标元素.bigImg和.smallImg和.smallList,使用css控制其样式,并按照您的喜好定位。
1. <div class="abPicZoom-preview"> <!-- 此为父层,添加调用时需要用到此处的class名 -->
2. <div class="bigImg">
3. <ul> <!-- bigImg为scrollEl内容滚动列表容器层,添加mainEl调用时需要用到此处的class名 -->
4. <li><img src="images/mid/1.jpg" preview="images/big/1.jpg" width="310" height="380" /></li>
5. <li><img src="images/mid/2.jpg" preview="images/big/2.jpg" width="310" height="380" /></li>
6. <li><img src="images/mid/3.jpg" preview="images/big/3.jpg" width="310" height="380" /></li>
7. <li><img src="images/mid/4.jpg" preview="images/big/4.jpg" width="310" height="380" /></li>
8. <li><img src="images/mid/5.jpg" preview="images/big/5.jpg" width="310" height="380" /></li>
9. <li><img src="images/mid/6.jpg" preview="images/big/6.jpg" width="310" height="380" /></li>
10. <li><img src="images/mid/7.jpg" preview="images/big/7.jpg" width="310" height="380" /></li>
11. <li><img src="images/mid/8.jpg" preview="images/big/8.jpg" width="310" height="380" /></li>
12. </ul>
13. </div><div style="clear:both"></div> <!-- clear:both清除CSS中产生的浮动 -->
14. <div class="smallImg"> <!-- smallImg为mainState导航列表容器层,调用时需用到此class名 -->
15. <div class="smallList">
16. <ul> <!-- smallList为缩略图层,调用时需用到此class名 -->
17. <li><a href="javascript:;"><img src="images/small/1.jpg" width="50" height="48" /></a></li>
18. <li><a href="javascript:;"><img src="images/small/2.jpg" width="50" height="48" /></a></li>
19. <li><a href="javascript:;"><img src="images/small/3.jpg" width="50" height="48" /></a></li>
20. <li><a href="javascript:;"><img src="images/small/4.jpg" width="50" height="48" /></a></li>
21. <li><a href="javascript:;"><img src="images/small/5.jpg" width="50" height="48" /></a></li>
22. <li><a href="javascript:;"><img src="images/small/6.jpg" width="50" height="48" /></a></li>
23. <li><a href="javascript:;"><img src="images/small/7.jpg" width="50" height="48" /></a></li>
24. <li><a href="javascript:;"><img src="images/small/8.jpg" width="50" height="48" /></a></li>
25. </ul>
26. </div>
27. <a href="javascript:;" class="sPrev">‹</a> <!-- sPrev为左按钮,调用时需用到此class名 -->
28. <a href="javascript:;" class="sNext">›</a> <!-- sNext为右按钮,调用时需用到此class名 -->
29. </div>
30. </div>
注意:编写 html 和 css 样式时一定要注意,父层元素和容器层元素,都必须具有指定的宽度和高度,jquery.agilebins-v1.0.4.min.js 才能正常的工作。
1. <style type="text/css">
2. * { margin:0; padding:0; }
3. body { background:#fff; font-size:12px; }
4. ul,li { list-style:none; }
5. p { word-wrap:break-word; }
6. img { border:0; vertical-align:middle; }
7. a { color:#333; text-decoration:none; }
8. a:hover { color:#1974A1; text-decoration:none; }
9. /* abPicZoom-preview为父层,添加调用时需要用到此处的class名 */
10. .abPicZoom-preview { width:342px; }
11. /* 预览图 bigImg为scrollEl内容滚动列表容器层 */
12. .abPicZoom-preview .bigImg { position:relative; width:310px; padding:5px; border:1px solid #E4E4E4;
13. box-shadow:0 6px 20px #107cc3; border-radius:30px; background:#fff; overflow:hidden; }
14. .abPicZoom-preview .bigImg li { width:310px; height:380px; overflow:hidden; }
15. .abPicZoom-preview .preview, .abPicZoom-preview .bigImg li img { border-radius:30px; }
16. /* selector选择器 图片上移动放大的样式 */
17. .abPicZoom-preview .selector { cursor:move; filter:alpha(opacity=20); -moz-opacity:0.2; opacity:0.2;
18. background-color:#000; border:1px solid #eee; width:160px; height:160px; border-radius:30px;
19. background-image:url(images/selector_bg.png); }
20. /* smallImg缩略图 scrollEl滚动列表容器元素class */
21. .abPicZoom-preview .smallImg { position:relative; width:322px; overflow:hidden; }
21. .abPicZoom-preview .smallImg .smallList { width:248px; margin:0 auto; overflow:hidden; }
22. .abPicZoom-preview .smallImg li { float:left; width:52px; padding:15px 5px 10px 5px; }
23. .abPicZoom-preview .smallImg li img { border-radius:8px; width:50px; height:48px; cursor:pointer; }
24. .abPicZoom-preview .smallImg li a { background:#0c91e8; border:1px solid #0c91e8; border-radius:8px;
25. width:50px; height:48px; box-shadow:0 2px 6px #107cc3; display:block; }
26. .abPicZoom-preview .smallImg li.on a { background:#4ad585; border:1px solid #4ad585; border-radius:8px;
27. width:50px; height:48px; display:block; }
28. .abPicZoom-preview .smallImg li a:hover, .abPicZoom-preview .smallImg li.on a:hover { border:1px solid #3dc878; }
29. /* sPrev左边按钮 sNext右边按钮 */
30. .abPicZoom-preview .sPrev, .abPicZoom-preview .sNext { border-radius:10px; box-shadow:0 2px 6px #107cc3;
31. z-index:2; position: absolute; top:17px; width:18px; height:48px; background:#212121; font-size:18px;
32. line-height:48px; color:#ccc; text-align:center; display:block; }
33. .abPicZoom-preview .sPrev { left:10px; } .abPicZoom-preview .sNext { right:10px; }
34. .abPicZoom-preview .sPrev:hover, .abPicZoom-preview .sNext:hover { color:#fff; background:#000; }
35. </style>
注意:在要使用效果的div父层abPicZoom-preview外,放置调用代码即可实现效果。建议把每个页面的调用,统一放在页尾</body> </html>标签关闭之前,或统一js文件内引用,方便维护与管理。
1. <script type="text/javascript">
2. $(".abPicZoom-preview").agilebins({
3. pnLoop: true, /* 是否需要按钮前后循环(true | false) */
4. direction: "left", /* 滑动方向(当type为slide时有效): top向上|right向右|bottom向下| left向左 */
5. scrollEl: ".smallImg ul", /* 滚动列表容器元素 */
6. mainEl: ".bigImg ul", /* 切换内容容器元素 */
7. visNum: 4, /* 显示个数 */
8. scrollNum: 4, /* 每次滚动为1个,一般不超过visNum设置的个数 */
9. speed: 0, /* 动画过渡效果延迟时间(毫秒) */
10. mPrev: ".sPrev", /* 切换按钮,上一个 */
11. mNext: ".sNext", /* 切换按钮,下一个 */
12. eventType: "click", /* 事件类型: mouseover | click */
13. startFunc: function(i){
14. $(".abPicZoom-preview").abPicZoom({marginLeft: 10, selectorClass: "selector",selector: $(".bigImg li img")
15. .eq(i)});
16. } /* agilebins扩展调用abPicZoom图片放大镜功能 */
17. });
18. </script>
19. </body>
20. </html>
Copyright © 2010-2023 www.geshai.com, Geshai Team, All Rights Reserved.
QQ交流群(一)158544200(二)790370978可反馈问题