偶然前端网发现了一个比较好的图片放大镜效果插件，稍作修改完善了一下，下面分享给大家。
效果还不错，如下图：
<!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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
