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

效果还不错，如下图：

wKiom1TDaCiSYnwAAAbpT9JKUs0121.jpg

wKioL1TDaSShe9_mAAYeVi5p7l4050.jpg

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><title>放大镜</title><style type="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 #634575 solid;}.m_p_w_picpath li {position: absolute;}.m_p_w_picpath li.now {z-index:1;}.im_zoom {background:#FEDE4F 50% top no-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 #634575 solid;}.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-repeat 0 0;left:0;}.m_next {      background:url(http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195114anj0yn8hefawepha.png) no-repeat -17px 0;right:0;}.m_prev:hover {  background:url(http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195114anj0yn8hefawepha.png) no-repeat -34px 0;left:0;}.m_next:hover {    background:url(http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195114anj0yn8hefawepha.png) no-repeat -51px 0;}.m_thumb_img {width:402px;height:54px;overflow: hidden;margin-left:17px;position:relative;}.m_thumb_img ol {position:absolute;width:300%;}.m_thumb_img li {width:54px;height:54px;float:left;margin:0 10px;}.m_thumb_img a {border:2px #a6ad88 solid;display:block;height:50px;float:left;}.m_thumb_img a:hover, .m_thumb_img .now {border:2px #f60 solid;}</style>
</head>
<body><script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script type="text/javascript">(function($) {var methods = {magnifier: function(options) {return this.each(function() {var defaults = {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 = new Image();_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('<span class="im_zoom" style="left:' + _zoomX + 'px;top:' + _zoomY + 'px;"></span>');if (!_body.find('.im_zoom_viewer').length) {_body.append('<div class="im_zoom_viewer" style="left:' + (_width + _positionX + 20) + 'px;top:' + _positionY + 'px;"></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;} else if (_zoomX > _width - settings.zoomWidth) {_zoomX = _width - settings.zoomWidth;};if (_zoomY < 0) {_zoomY = 0;} else if (_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': '-85px 0'});_prev.css({'background-position': '-68px 0'});}_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': '-85px 0'});}}});_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': '-68px 0'});}}});});}};$.fn.Plugins = function(method) {//初始化插件if (methods[method]) {return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));} else {$.error('在Plugins中不存在' + method + '方法');}}})(jQuery);</script><script type="text/javascript">$(function() {/*zoomWidth : 遮罩小图片宽度zoomHeight : 遮罩小图片高度,largeImgWidth : 大图的宽度,largeImgHeight : 大图的高度,   */$('.magnifier').Plugins('magnifier', {zoomWidth: 100,zoomHeight: 100,largeImgWidth: 400,largeImgHeight: 400});})</script><div class="magnifier"><div class="m_p_w_picpath"><img src="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195113nodqe4i31e6eiwi4.jpg" width="400" height="400" /></div><div class="m_thumb"><a href="javascript:;" class="m_prev">prev</a><a href="javascript:;" class="m_next">next</a><div class="m_thumb_img"><ol class="clearfix"><li><a href="javascript:;" class="now"><img src="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195113nodqe4i31e6eiwi4.jpg" width="50" height="50" /></a></li><li><a href="javascript:;"><img src="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195039acx13fuy2mkuy8mx.jpg" width="50" height="50" /></a></li><li><a href="javascript:;"><img src="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/195011cn7uu0pcxutpwnkp.jpg" width="50" height="50" /></a></li><li><a href="javascript:;"><img src="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/194956yv7w9vm44v4794f9.jpg" width="50" height="50" /></a></li><li><a href="javascript:;"><img src="http://www.w3cfuns.com/data/p_w_upload/album/201403/12/194914rj7wl297y9u24rla.jpg" width="50" height="50" /></a></li><li><a href="javascript:;"><img src="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