偶然前端网发现了一个比较好的图片放大镜效果插件，稍作修改完善了一下，下面分享给大家。
效果还不错，如下图：
<!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" ></span>'); if (!_body.find('.im_zoom_viewer').length) { _body.append('<div class="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; } 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
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
