发布一款仿天猫产品放大镜JQuery插件
2014-03-18 17:52 盛世游侠 阅读(960) 评论(0) 编辑 收藏 举报效果如下图:
1、原图
2、放大镜效果:
插件源码如下:
/* * * JQUERY 简洁无极放大镜插件-zoomer * Author:盛世游侠 * QQ:418873053 * Date:2013-11-22 * */ (function($) { $.fn.zoomer = function(o){ o = $.extend({ pic:null,//原图img的容器 leftImg:null,//原图img本身 drag:null,//原图img选看区 bigpic:null,//大图img的容器 box:null,//大图img本身 //img_zoom参数是指放大的倍数,取值范围从1到无穷大,可以取小数。 //img_zoom参数决定了大图长和宽,以及大图显示区域的长和宽。该参数可以自己设置,也可以默认,如果大图与原图不是同一张图,建议默认。 img_zoom:o.box.innerWidth()/o.leftImg.innerWidth() }, o || {}); o.pic.mouseout(function(){ o.drag.hide(); o.bigpic.hide(); }); //重置大图宽和高,使其与原图成一定比例 o.box.width(o.leftImg.width()*o.img_zoom); o.box.height(o.leftImg.height()*o.img_zoom); //原图选看区移动事件函数 o.pic.mousemove(function(e){ o.drag.show(); o.bigpic.show(); //重置大图显示区长和宽与原图的选看区长和宽成一定比例 o.bigpic.width(o.drag.width()*o.img_zoom); o.bigpic.height(o.drag.height()*o.img_zoom); //原图选看区的实时位置(原图选看区在HTML文档中的实时left和实时top) var drag_x=e.pageX - o.pic.offset().left-o.drag.innerWidth()/2; var drag_y=e.pageY -o.pic.offset().top-o.drag.innerHeight()/2; //使原图选看区的实时位置不超出原图的边界 if (drag_x<0){drag_x=0;} if (drag_x>o.pic.width()-o.drag.width()) {drag_x=o.pic.width()-o.drag.width()}; if (drag_y<0){drag_y=0;} if (drag_y>o.pic.height()-o.drag.height()) {drag_y=o.pic.height()-o.drag.height()}; //实时设置原图选看区在原图中的位置,这里将jQuery对象转换为了Dom对象然后赋值,所以需要注意drag.style.left要有‘px’单位。 o.drag.get(0).style.left=drag_x+'px'; o.drag.get(0).style.top=drag_y+'px'; //实时设置大图在大图显示区域中的卷动值scrollLeft和scrollTop o.bigpic.scrollLeft(drag_x*o.img_zoom); o.bigpic.scrollTop(drag_y*o.img_zoom); }); }; })(jQuery);
配套的html代码如下:
<div class="showimg"> <div id="bigimg" class="bigimg"> <a href="images/upload/p2_01.gif"><img src="images/upload/p2_01.gif" id="leftImg" title="bigimg" /></a> <div id="drag"><!--放大镜图标--></div> </div> <div class="bigpic" id="bigpic"><img id='box'src="images/upload/p2_01.gif"></div> <div class="litimg"> <a class="hover_a" href="#"><span><b></b></span><img src="images/upload/p2_01.gif" /><u></u></a> <a href="#"><span><b></b></span><img src="images/upload/p19_04.gif" /><u></u></a> <a href="#"><span><b></b></span><img src="images/upload/index_17.jpg" /><u></u></a> </div> </div>
配套的插件调用代码:
<script type="text/javascript"> /*初始化插件*/ $().zoomer({ pic:$('#bigimg'), bigpic:$('#bigpic'), box:$('#box'), drag:$('#drag'), leftImg:$('#leftImg') }); </script>
然后我们给它加上一个点击小图切换对应大图的功能:
<script type="text/javascript"> /*点击小图片切换大图片*/ $(function(){ $('.litimg a').click(function(){ var litsrc = $(this).children('img').attr('src'); $('.showimg #bigimg #leftImg').attr('src',litsrc); $('.showimg .bigpic #box').attr('src',litsrc); }); }); </script>