插件介绍:
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> <!-- 必须存在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>

二. 编写html代码

注意:创建一个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>

三. 编写例子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运行的开源特效插件

Copyright © 2010-2023 www.geshai.com, Geshai Team, All Rights Reserved.
QQ交流群(一)158544200(二)790370978可反馈问题

Top