图片模拟放大镜插件abPicZoom(原创)
使用说明以及注意事项如下：1、首先引用jQuery v1.8.3+版本 ( 更低版本能兼容到jQuery1.43推荐使用jQuery1.8.3+ ) 目录地址 js/jquery.min.js
2、使用组图功能需要引用agilebins 目录地址 js/jquery.agilebins-v1.0.4.min.js 迷你压缩版（开发版在jq22站内搜索AgileBins下载）
3、引用abPicZoom所需相关插件 目录地址 js/abPicZoom-v1.0.js 开发版（不推荐直接使用） js/jquery.abPicZoom.min.js 迷你压缩版（推荐直接使用）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>abPicZoom是一款基于Agilebins和jQuery实现的图片放大功能的插件</title>
<meta name="keywords" content="格晒特效,格晒插件,abPicZoom,jQuery插件" />
<meta name="description" content="abPicZoom下载，格晒js特效插件abPicZoom.js是一款基于jQuery运行的滚动条开源特效插件，使用方便通过配置一定的参数，来设置放大镜的外观样式等属性。需结合agilebins特效插件的图功能来实现放大镜的多图切换效果。特别适合需要图片放大展示类等站点，例如商城。兼容IE6+ Safari Opera Firefox Chrome等大部分浏览器。" />
<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script><!-- jquery.min.js必须存在 -->
<script type="text/javascript" src="https://www.jq22.com/demo/abPicZoom202212042307/js/jquery.agilebins-v1.0.4.min.js"></script><!-- jquery.agilebins-v1.0.4.min.js必须存在 -->
<script type="text/javascript" src="https://www.jq22.com/demo/abPicZoom202212042307/js/jquery.abPicZoom.min.js"></script><!-- jquery.abPicZoom.min.js必须存在 -->
<style type="text/css">
*{margin:0;padding:0}body{background:#0c91e8;font-size:12px;color:#183b52}ul,li{list-style:none}p{word-wrap:break-word}img{border:0;vertical-align:middle}a{color:#eef7fe;text-decoration:none}a:hover{color:#fff;text-decoration:none}.demo-intro2 .p1{font-size:14px;line-height:24px;padding:0 0 10px 0}.demo-intro2 .p2{font-size:18px;padding:20px 10px 0 0;font-style:italic;display:block;font-weight:bold;height:40px;line-height:24px}.demo-intro2 a{color:#183b52;text-decoration:none}.demo-intro2 a:hover{color:#fff;text-decoration:none}.codeHd{text-align:center;font-size:14px}.codeHd p{line-height:28px;color:#183b52;padding-bottom:30px}.codeHd p.p1{padding:0 200px 30px 200px}.codeHd p strong{text-align:center;font-weight:700}.codeHd p span{font-style:italic;font-size:12px}
</style>
</head>
<body>
<!-- 头部开始 -->
<div style="text-align:center;padding:120px 0 180px 0;"><div class="logo z"><h2 style="color:#ebf7fe;font-size:38px;line-height:50px;font-weight:bold;font-style:italic;"><a href="http://ab.geshai.com/other-plus/abPicZoom/abPicZoom.html" title="abPicZoom v1.02" target="_blank">abPicZoom</a></h2><p style="font-size:13px;font-style:italic;color:#ddf0fb;">图片模拟放大镜插件 v1.0</p></div></div>
<!-- 头部结束 -->
<!-- ==============================插件效果 css 开始 ============================== -->
<style type="text/css">
.demo-body { width:760px; margin:0 auto; }
.abPicZoom-preview { width:342px; }
/* 预览图 */
.abPicZoom-preview .bigImg { width:310px; height:380px; padding:5px; border:1px solid #E4E4E4; box-shadow:0 6px 20px #107cc3; border-radius:30px; background:#fff; overflow:hidden; }
.abPicZoom-preview .bigImg li { width:310px; height:380px; overflow:hidden; }
.abPicZoom-preview .preview, .abPicZoom-preview .bigImg li img { border-radius:30px; }
/*选择器*/
.abPicZoom-preview .selector { cursor:move; filter:alpha(opacity=20); -moz-opacity:0.2; opacity:0.2; background-color:#000; border:1px solid #eee; width:160px; height:160px; background-image:url(images/selector_bg.png); border-radius:30px; }
/* 缩略图 */
.abPicZoom-preview .smallImg { position:relative; width:322px; height:75px; overflow:hidden; }
.abPicZoom-preview .smallImg .smallList { width:248px; margin:0 auto; overflow:hidden; }
.abPicZoom-preview .smallImg li { float:left; width:52px; padding:15px 5px 10px 5px; }
.abPicZoom-preview .smallImg li img { border-radius:8px; width:50px; height:48px; cursor:pointer; }
.abPicZoom-preview .smallImg li a { background:#0c91e8; border:1px solid #0c91e8; border-radius:8px; width:50px; height:48px; box-shadow:0 2px 6px #107cc3; display:block; }
.abPicZoom-preview .smallImg li.on a { background:#4ad585; border:1px solid #4ad585; border-radius:8px; width:50px; height:48px; display:block; }
.abPicZoom-preview .smallImg li a:hover, .abPicZoom-preview .smallImg li.on a:hover { border:1px solid #3dc878; }
/*上下按钮*/
.abPicZoom-preview .sPrev, .abPicZoom-preview .sNext { border-radius:10px; box-shadow:0 2px 6px #107cc3; z-index:2; position: absolute; top:17px; width:18px; height:48px; background:#212121; font-size:18px; line-height:48px; color:#ccc; text-align:center; display:block; }
.abPicZoom-preview .sPrev { left:10px; } .abPicZoom-preview .sNext { right:10px; }
.abPicZoom-preview .sPrev:hover, .abPicZoom-preview .sNext:hover { color:#fff; background:#000; }
</style>
<!-- ==============================插件效果 css 结束 ============================== -->
<div class="demo-body">
<!-- 插件HTML代码效果开始 -->
<div class="abPicZoom-preview" style="float:left; margin-right:30px;">
<div class="bigImg">
<ul>
<li><img src="images/mid/1.jpg" preview="https://www.jq22.com/demo/abPicZoom202212042307/images/big/1.jpg" width="310" height="380" /></li>
<li><img src="images/mid/2.jpg" preview="https://www.jq22.com/demo/abPicZoom202212042307/images/big/2.jpg" width="310" height="380" /></li>
<li><img src="images/mid/3.jpg" preview="https://www.jq22.com/demo/abPicZoom202212042307/images/big/3.jpg" width="310" height="380" /></li>
<li><img src="images/mid/4.jpg" preview="https://www.jq22.com/demo/abPicZoom202212042307/images/big/4.jpg" width="310" height="380" /></li>
<li><img src="images/mid/5.jpg" preview="https://www.jq22.com/demo/abPicZoom202212042307/images/big/5.jpg" width="310" height="380" /></li>
<li><img src="images/mid/6.jpg" preview="https://www.jq22.com/demo/abPicZoom202212042307/images/big/6.jpg" width="310" height="380" /></li>
<li><img src="images/mid/7.jpg" preview="https://www.jq22.com/demo/abPicZoom202212042307/images/big/7.jpg" width="310" height="380" /></li>
<li><img src="images/mid/8.jpg" preview="https://www.jq22.com/demo/abPicZoom202212042307/images/big/8.jpg" width="310" height="380" /></li>
</ul>
</div>
<div style="clear:both"></div>
<div class="smallImg">
<div class="smallList">
<ul>
<li><a href="javascript:;"><img src="https://www.jq22.com/demo/abPicZoom202212042307/images/small/1.jpg" width="50" height="48" /></a></li>
<li><a href="javascript:;"><img src="https://www.jq22.com/demo/abPicZoom202212042307/images/small/2.jpg" width="50" height="48" /></a></li>
<li><a href="javascript:;"><img src="https://www.jq22.com/demo/abPicZoom202212042307/images/small/3.jpg" width="50" height="48" /></a></li>
<li><a href="javascript:;"><img src="https://www.jq22.com/demo/abPicZoom202212042307/images/small/4.jpg" width="50" height="48" /></a></li>
<li><a href="javascript:;"><img src="https://www.jq22.com/demo/abPicZoom202212042307/images/small/5.jpg" width="50" height="48" /></a></li>
<li><a href="javascript:;"><img src="https://www.jq22.com/demo/abPicZoom202212042307/images/small/6.jpg" width="50" height="48" /></a></li>
<li><a href="javascript:;"><img src="https://www.jq22.com/demo/abPicZoom202212042307/images/small/7.jpg" width="50" height="48" /></a></li>
<li><a href="javascript:;"><img src="https://www.jq22.com/demo/abPicZoom202212042307/images/small/8.jpg" width="50" height="48" /></a></li>
</ul>
</div>
<a href="javascript:;" class="sPrev">‹</a>
<a href="javascript:;" class="sNext">›</a>
</div>
</div>
<!-- 插件HTML代码效果结束// -->
<!-- 插件介绍 开始// -->
<div class="demo-intro2" style="height:400px;">
<dl class="pd-01">
<dt class="p2">插件介绍</dt>
<dd class="p1">abPicZoom是一款实用的图片放大功能的插件。</dd>
<dd class="p1">使用方便通过配置一定的参数，来设置放大镜的外观样式等属性。需结合<a href="https://www.jq22.com/jquery-info24416" target="_blank">agilebins</a>特效插件的组图功能来实现放大镜的多图切换效果。<br>特别适合需要图片放大展示类的站点，例如商城。</dd>
<dd class="p1">兼容<spanclass="a1">IE6+ Safari Opera Firefox Chrome</span>等大部分浏览器。</dd>
</dl>
</div><!-- 插件介绍 结束// -->
</div>
<!-- 插件js代码调用开始 -->
<script type="text/javascript">
$(".abPicZoom-preview").agilebins({
pnLoop: true, /* 是否需要按钮前后循环(true | false) */
direction: "left", /* 滑动方向（当type为slide时有效）: top向上|right向右|bottom向下| left向左 */
scrollEl: ".smallImg ul", /* 滚动列表容器元素 */
mainEl: ".bigImg ul", /* 切换内容容器元素 */
previewClass:"preview",
visNum: 4, /* 显示个数 */
scrollNum: 4, /* 每次滚动为1个，一般不超过visNum设置的个数 */
speed: 0, /* 动画过渡效果延迟时间(毫秒) */
mPrev: ".sPrev", /* 切换按钮，上一个 */
mNext: ".sNext",/* 切换按钮，下一个 */
eventType: "click", /*事件类型: mouseover | click*/
startFunc: function(i){
$(".abPicZoom-preview").abPicZoom({marginLeft: 10, selectorClass: "selector", selector: $(".bigImg li img").eq(i)});/* agilebins扩展调用abPicZoom图片放大镜功能 */
}
});
</script>
<!-- 插件js代码调用结束 -->
<div style="width: 1200px; margin: 0 auto; padding: 100px 0 140px 0;">
<div style="height:0;clear:both;overflow:hidden;"></div>
<div style="height:100px;"></div>
<div style="text-align:center;font-style:italic;letter-spacing:.05em;color:#183b52;"><h2 style="font-size:24px;height:120px;line-height:120px;font-weight:bold;">一. 基础使用设置</h2></div>
<div class="codeHd">
<p class="p1">在网页的头部引用jQuery和agilebins和abPicZoom三个必需的js既将jquery和agilebins和abPicZoom包含在head标中或位于关闭正文标记之前。请确保在和abPicZoom之前包含agilebins，agilebins之前包含jquery前后顺序不能乱。</p>
</div>
<div style="text-align:center;font-style:italic;letter-spacing:.05em;color:#183b52;"><h2 style="font-size:24px;height:120px;line-height:120px;font-weight:bold;">二. 编写html代码</h2></div>
<div class="codeHd">
<p class="p1">创建一个div的父层，如此例子abPicZoom-preview。在其内部为每一个幻灯片创建一个目标元素.bigImg和.smallImg和.smallList，使用css控制其样式。jQuery和abPicZoom和agilebins将选定父层元素内的层标签与样式应用于它们，并按照您的喜好定位。</p>
</div>
<div style="text-align:center;font-style:italic;letter-spacing:.05em;color:#183b52;"><h2 style="font-size:24px;height:120px;line-height:120px;font-weight:bold;">三. 编写例子css样式</h2></div>
<div class="codeHd">
<p class="p1">编写 html 和 css 样式时一定要注意，父层元素和容器层元素，都必须具有指定的宽度和高度，jquery.agilebins-v1.0.4.min.js 才能正常的工作。</p>
</div>
<div style="text-align:center;font-style:italic;letter-spacing:.05em;color:#183b52;"><h2 style="font-size:24px;height:120px;line-height:120px;font-weight:bold;">四. 调用参数的设置</h2></div>
<div class="codeHd">
<p class="p1">在要使用效果的div父层abPicZoom-preview外，放置调用代码即可实现效果。建议把每个页面的调用，统一放在页尾</body> </html>标签关闭之前，方便维护与管理。注意调用代码必须放在引用jquery和agilebins和abPicZoom之后的位置才能正常使用</p>
</div>
</div>
<!-- 页尾 -->
<div style="height:100px;"></div><div style="width:42px;height:42px;margin:0 auto 0 auto;"><a style="width:42px;height:42px;line-height:42px;font-weight:500;background:#3dc878;display:block;font-size:12px;font-style:italic;color:#fff;text-align:center;border-radius:50px;box-shadow:0px 4px 10px 0px rgb(16 124 195);"title="返回顶部" href="javascript:scroll(0,0);">Top</a></div><div style="height:150px;"></div>
</body>
</html>
页:
[1]