<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片放大镜</title> </head> <style> *{ padding:0; margin:0} .fdj{} .fdj .small-wrap{ overflow:hidden; float:left} .fdj .small-main{ width:266px; height:231px; position:relative} .fdj .small-main img{ width:100%; height:100%} .fdj .small-main .mask{ display:none; cursor:crosshair; position:absolute; left:0; top:0;width:100px; height:80px; background:rgba(0,0,0,.3)} .fdj .bot-main{ width:266px; height:70px; overflow:hidden; position:relative;background-color: #F1F0F0; margin-top:2px;} .fdj .bot-main .btn{ z-index:99; cursor:pointer; position:absolute; top:0; width:14px; height:70px; background-color:#ccc; color:#fff; line-height:70px; text-align:center} .fdj .bot-main .prev{ left:0;} .fdj .bot-main .next{ right:0;} .fdj .bot-main .pic-list{ width:238px; height:70px; position:absolute; left:14px;} .fdj .bot-main .list{ width:3000px; position:absolute; left:0; top:0;} .fdj .bot-main .list li{ float:left; list-style:none} .fdj .bot-main .list img{ width:70px; height:46px; margin:12px 0 0 4px;border:2px solid #F1F0F0} .fdj .bot-main .list .active img{border:2px solid #959595} .fdj .big-wrap{width:266px; height:231px; border:1px solid #ccc; float:left; overflow:hidden; display:none; position:relative} .fdj .big-wrap img{ position:absolute; left:0; top:0; min-width:600px; min-height:700px;} </style> <body> <div class="fdj imageZoom"> <div class="small-wrap"> <div class="small-main"> <img src="http://0.thumb.pc6.com/thumb/up/2016-1/2016126154311097190_225_260.jpg"> <div class="mask"></div> </div> <div class="bot-main"> <span class="btn prev">《</span> <div class="pic-list"> <ul class="list"> <li class="active"><img src="http://0.thumb.pc6.com/thumb/up/2016-1/2016126154311097190_225_260.jpg"></li> <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e6e0ced0c.jpg"></li> <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e6888e257.jpg"></li> <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e5bedce24.jpg"></li> <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e481ac8e8.png"></li> <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e2c9725f8.jpg"></li> <li><img src="http://www.guanfang123.com/Uploads/Picture/20150923/56023b44d65e2.jpg"></li> </ul> </div> <span class="btn next">》</span> </div> </div> <div class="big-wrap"><img src="http://0.thumb.pc6.com/thumb/up/2016-1/2016126154311097190_225_260.jpg"></div> </div> <script src="soft/js/global.js"></script> <script> ;(function(){ $.fn.imageZoom = function(options){ var defaults = {}; var sets = $.extend(defaults , options); this.each(function(){ var _this=$(this); var small_wrap=_this.find(".small-main");//小图 var big_wrap=_this.find(".big-wrap");//大图 var mask=_this.find(".mask");//遮罩 var oul=_this.find('ul'); var oli=oul.find('li'); var i=0,small_w,small_h,big_w,big_h,blc_w,blc_h; oul.width(oli.outerWidth(true)*oli.length); //切换缩略图 _this.find('.next').click(function(){ i>=oli.length-3?i=0:i++; oul.animate({'left':-i*oli.outerWidth(true)}); }); _this.find('.prev').click(function(){ i<=0?i=oli.length-3:i--; oul.animate({'left':-i*oli.outerWidth(true)}); }); oli.hover(function(){ var _src=$(this).find("img").attr('src'); $(this).addClass("active").siblings().removeClass("active"); small_wrap.find("img").attr("src",_src); big_wrap.find("img").attr("src",_src); }); //小图移动 small_wrap.mousemove(function(e){ small_w=small_wrap.width()-mask.width(); small_h=small_wrap.height()-mask.height(); big_w=big_wrap.find("img").width()-big_wrap.width(); big_h=big_wrap.find("img").height()-big_wrap.height(); blc_w=small_w/big_w; blc_h=small_h/big_h; mask.show(); big_wrap.show(); var maskLeft = mask.position().left; var maskTop = mask.position().top; var X=e.pageX-mask.width()/2; var Y=e.pageY-mask.height()/2; if(X<=0){X=0}; if(Y<=0){Y=0}; if(X>=$(this).width()-mask.width()){ X=$(this).width()-mask.width() }; if(Y>=$(this).height()-mask.height()){ Y=$(this).height()-mask.height() }; mask.css({'left':X,'top':Y}); big_wrap.find("img").css({'left':-X/blc_w,'top':-Y/blc_h}); }).mouseout(function(){ mask.hide(); big_wrap.hide(); }); }); }; })(jQuery) $(function(){ $('.imageZoom').imageZoom(); }) </script> </body> </html>
实例截图：