abPicZoom首页 - 图片模拟放大镜插件

‹ ›

插件介绍：: abPicZoom是一款实用的jQuery图片放大功能的插件。; 使用方便通过配置一定的参数，来设置放大镜的外观样式等属性。需结合agilebins特效插件的组图功能来实现放大镜的多图切换效果。
特别适合需要图片放大展示类等站点，例如商城。; 兼容IE6+ Safari Opera Firefox Chrome等大部分浏览器。

下载此演示例子：: 百度网盘 ( zip资源包 )|阿里云盘 ( exe资源包 )
GitHub|Gitee

一. 基础使用设置

注意：在网页头部引用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>

7. <script type="text/javascript" src="js/jquery.agilebins-v1.0.4.min.js"></script>

8. <script type="text/javascript" src="js/jquery.abPicZoom.min.js"></script>

9. </head>

10. <body>

二. 编写html代码

注意：创建一个div的父层，如此例子abPicZoom-preview。在其内部为每一个幻灯片创建一个目标元素.bigImg和.smallImg和.smallList，使用css控制其样式，并按照您的喜好定位。

1. <div class="abPicZoom-preview">

2. <div class="bigImg">

3. <ul>

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>

14. <div class="smallImg">

15. <div class="smallList">

16. <ul>

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>

28. <a href="javascript:;" class="sNext">›</a>

29. </div>

30. </div>

三. 编写例子css样式

注意：编写 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>

返回首页|综合下载

abPicZoom基于jQuery和Agilebins运行的开源特效插件

Top