偶然前端网发现了一个比较好的图片放大镜效果插件，稍作修改完善了一下，下面分享给大家。

效果还不错，如下图：

<!DOCTYPE HTML>

<html><head><metacharset="UTF-8"><title>放大镜</title><styletype="text/css">body{margin:200px;background:#000;}ol,li{list-style:none;margin:0;padding:0;}.clearfix:after{content:"\200B";display:block;height:0;clear:both;}.clearfix{*zoom:1;}.magnifier{width:402px;height:402px;}.m_p_w_picpath{position:relative;width:400px;height:400px;border:1px#634575solid;}.m_p_w_picpathli{position:absolute;}.m_p_w_picpathli.now{z-index:1;}.im_zoom{background:#FEDE4F50%topno-repeat;opacity:0.5;display:block;position:absolute;width:100px;height:100px;left:0;top:0;}.im_zoom_viewer{position:absolute;width:400px;height:400px;border:1px#634575solid;}.m_thumb{position:relative;width:402px;height:57px;overflow:hidden;margin-top:10px;}.m_prev,.m_next{display:block;height:54px;width:17px;text-indent:-99999em;position:absolute;z-index:99;}.m_prev{background:url(http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195114anj0yn8hefawepha.png)no-repeat00;left:0;}.m_next{background:url(http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195114anj0yn8hefawepha.png)no-repeat-17px0;right:0;}.m_prev:hover{background:url(http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195114anj0yn8hefawepha.png)no-repeat-34px0;left:0;}.m_next:hover{background:url(http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195114anj0yn8hefawepha.png)no-repeat-51px0;}.m_thumb_img{width:402px;height:54px;overflow:hidden;margin-left:17px;position:relative;}.m_thumb_imgol{position:absolute;width:300%;}.m_thumb_imgli{width:54px;height:54px;float:left;margin:010px;}.m_thumb_imga{border:2px#a6ad88solid;display:block;height:50px;float:left;}.m_thumb_imga:hover,.m_thumb_img.now{border:2px#f60solid;}</style></head><body><scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script><scripttype="text/javascript">(function($){varmethods={magnifier:function(options){returnthis.each(function(){vardefaults={zoomWidth:100,zoomHeight:100,largeImgWidth:400,largeImgHeight:400},settings=$.extend({},defaults,options),_body=$('body'),_This=$(this),_imgBox=_This.find('.m_p_w_picpath'),_imgShow=_imgBox.find('img'),_thumbContent=_This.find('.m_thumb'),_thumbList=_thumbContent.find('ol'),_thumbLiLeft=_thumbContent.find('li').eq(0).css("margin-left"),_thumbLiRight=_thumbContent.find('li').eq(0).css("margin-right"),_thumbLRWidth=parseInt(_thumbLiLeft)+parseInt(_thumbLiRight),_thumbWidth=_thumbList.find('a')[0].offsetWidth,_thumbImg=_thumbContent.find('img'),_prev=_thumbContent.find('.m_prev'),_next=_thumbContent.find('.m_next'),_width=_imgBox.width(),_height=_imgBox.height(),_positionX=_This.offset().left,_positionY=_This.offset().top,count=moveLen=0,_img=newImage();_thumbList.find('a').on('click',function(event){var_this=$(this),_src=_this.find('img').attr('src');_img.src=_src;$('.im_zoom_viewer').css({background:'url('+_src+')no-repeat'});_thumbList.find('a').removeClass('now');_this.addClass('now');_imgShow.attr('src',_src);});_imgBox.on({mouseenter:function(event){var_this=$(this),_zoomX=event.pageX-_positionX-(settings.zoomWidth/2),_zoomY=event.pageY-_positionY-(settings.zoomHeight/2),_imgSrc=_imgBox.find('img').attr('src');_this.css("cursor","move").append('<spanclass="im_zoom"></span>');if(!_body.find('.im_zoom_viewer').length){_body.append('<divclass="im_zoom_viewer"></div>');$('.im_zoom_viewer').css({background:'url('+_imgSrc+')no-repeat'});_img.src=_imgSrc;}},mouseleave:function(event){var_this=$(this);_this.find('.im_zoom').remove();_body.find('.im_zoom_viewer').hide();},mousemove:function(event){var_this=$(this),_zoomX=event.pageX-_positionX-(settings.zoomWidth/2),_zoomY=event.pageY-_positionY-(settings.zoomHeight/2);if(_zoomX<0){_zoomX=0;}elseif(_zoomX>_width-settings.zoomWidth){_zoomX=_width-settings.zoomWidth;};if(_zoomY<0){_zoomY=0;}elseif(_zoomY>_height-settings.zoomHeight){_zoomY=_height-settings.zoomHeight;};console.log(_img.width)var_viewX=Math.ceil(parseInt($('.im_zoom')[0].style.left)/(_width-settings.zoomWidth)*(_img.width-_width)),_viewY=Math.ceil(parseInt($('.im_zoom')[0].style.top)/(_height-settings.zoomHeight)*(_img.height-_width));$('.im_zoom').css({left:_zoomX,top:_zoomY});$('.im_zoom_viewer').css({'display':'block','background-position':-_viewX+'px'+-_viewY+'px'});}});if(_thumbImg.length<5){_next.css({'background-position':'-85px0'});_prev.css({'background-position':'-68px0'});}_next.on('click',function(event){event.preventDefault();var_this=$(this),len=_thumbList.find('a').length;if(count<len-5){_prev.removeAttr('style');moveLen+=_thumbWidth+_thumbLRWidth;_thumbList.stop().animate({"left":-moveLen},100,'linear');count++;if(count===len-5){_this.css({'background-position':'-85px0'});}}});_prev.on('click',function(event){event.preventDefault();var_this=$(this),len=_thumbList.find('a').length;if(count>0){_next.removeAttr('style');moveLen-=_thumbWidth+_thumbLRWidth;_thumbList.stop().animate({"left":-moveLen},100,'linear');count--;if(count===0){_this.css({'background-position':'-68px0'});}}});});}};$.fn.Plugins=function(method){//初始化插件if(methods[method]){returnmethods[method].apply(this,Array.prototype.slice.call(arguments,1));}else{$.error('在Plugins中不存在'+method+'方法');}}})(jQuery);</script><scripttype="text/javascript">$(function(){/*zoomWidth:遮罩小图片宽度zoomHeight:遮罩小图片高度,largeImgWidth:大图的宽度,largeImgHeight:大图的高度,*/$('.magnifier').Plugins('magnifier',{zoomWidth:100,zoomHeight:100,largeImgWidth:400,largeImgHeight:400});})</script><divclass="magnifier"><divclass="m_p_w_picpath"><imgsrc="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195113nodqe4i31e6eiwi4.jpg"width="400"height="400"/></div><divclass="m_thumb"><ahref="javascript:;"class="m_prev">prev</a><ahref="javascript:;"class="m_next">next</a><divclass="m_thumb_img"><olclass="clearfix"><li><ahref="javascript:;"class="now"><imgsrc="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195113nodqe4i31e6eiwi4.jpg"width="50"height="50"/></a></li><li><ahref="javascript:;"><imgsrc="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195039acx13fuy2mkuy8mx.jpg"width="50"height="50"/></a></li><li><ahref="javascript:;"><imgsrc="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195011cn7uu0pcxutpwnkp.jpg"width="50"height="50"/></a></li><li><ahref="javascript:;"><imgsrc="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/194956yv7w9vm44v4794f9.jpg"width="50"height="50"/></a></li><li><ahref="javascript:;"><imgsrc="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/194914rj7wl297y9u24rla.jpg"width="50"height="50"/></a></li><li><ahref="javascript:;"><imgsrc="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/194940cutwe9tbgqu9wqqw.jpg"width="50"height="50"/></a></li></ol></div></div></div></body></html>

参考原文地址：http://www.w3cfuns.com/article-5599770-1-1.html

附件：http://down.51cto.com/data/2365347