首页 > 代码库 > 基于jquery的放大镜插件
基于jquery的放大镜插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="http://www.mamicode.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<style type="text/css">
body {
margin: 0
}
.imgDiv {
position: relative;
width: 384px;
height: 240px;
}
.imgDiv img {
width: 100%;
height: 100%;
}
.zoomDiv {
position: absolute;
background: #000;
opacity: .3;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
}
.rangeDiv {
position: absolute;
left: 0;
top: 0;
}
.rangeDiv img {
width: 100%;
}
.imgBox {
position: absolute;
left: 600px;
top: 10px;
overflow: hidden;
}
.imgBox img {
position: absolute;
left: 0;
top: 0
}
.imgDiv2 {
position: relative;
width: 384px;
height: 240px;
cursor: crosshair;
margin-top: 50px;
margin-left: 100px;
}
.zoomGlass {
position: absolute;
left: 0;
top: 0;
display: none;
background: url(big.jpg);
overflow: hidden;
border-radius: 50%;
/*box-shadow:1px 1px 1px #eee,-1px -1px 1px #eee;*/
}
.imgDiv2 img {
width: 100%;
border: none;
vertical-align: bottom;
display: block;
}
</style>
<body>
<div id="imgDiv" class="imgDiv">
<img class="img" id="img1" src="http://www.mamicode.com/1.jpg" data-img="1.jpg" />
</div>
<div id="" class="imgBox"></div>
<div id="imgDiv2" class="imgDiv2">
<img class="img" src="http://www.mamicode.com/1.jpg" data-img="1.jpg" />
<div class="zoomGlass"></div>
</div>
</body>
</html>
<script type="text/javascript">
/*===================================
* createTime: 2016/11/14
* version: 1.0
* modify: {}
*arguements:{zoomDom:,w:,h:,range:,style:放大风格}放大图片的父级元素/放大镜,蒙层的大小,放大倍数
* description: 图片框的大小要和图片成比例,
===================================*/
(function($) {
$.fn.imgZoom = function(options) {
//默认参数
var defualts = {
w: 200, //蒙层的宽度
h: 200, //蒙层的高度
range: 2,
zoomDom: ‘#imgBox‘,
style: 1
}
var opts = $.extend({}, defualts, options);
var consts = {};
var that = $(this);
var imgBoxDom = $(opts.zoomDom);
var zoomImg = ‘‘;
var imgload = false;
var img = new Image();
return this.each(function() {
that.hover(function() {
function e(t) {
this.x = t.pageX, this.y = t.pageY
}
var _this = $(this);
var src = http://www.mamicode.com/_this.find("img").attr(‘data-img‘),
left = _this.offset().left,
top = _this.offset().top;
if (opts.style == 1) {
zoomImg = $(‘<div class="rangeDiv"><img class="zoomImg" src="http://image.meilele.com/images/blank.gif"/></div>‘);
var zoomDiv = $(‘<div class="zoomDiv"></div>‘);
zoomDiv.appendTo(that).width(opts.w + ‘px‘).height(opts.h + ‘px‘);
} else {
imgBoxDom.width(opts.w).height(opts.h).show();
zoomImg = $(‘<img class="zoomImg" src="http://image.meilele.com/images/blank.gif"/>‘);
zoomImg.width(consts.midwidth * opts.range + ‘px‘).height(consts.midheight * opts.range + ‘px‘)
zoomImg.appendTo(imgBoxDom);
}
img.src = http://www.mamicode.com/src;
if (imgload) {
$(‘.zoomImg‘).attr(‘src‘, src);
} else {
img.onload = function() {
$(‘.zoomImg‘).attr(‘src‘, src);
imgload = true;
}
}
//获取宽高
consts = {
midwidth: that.width(),
midheight: that.height(),
bigwidth: (opts.w) * opts.range,
bigheight: (opts.h) * opts.range
}
//设置宽高
zoomImg.width(consts.midwidth * opts.range + ‘px‘).height(consts.midheight * opts.range + ‘px‘)
imgBoxDom.append(zoomImg);
if (opts.style == 1) {
//放大图的div大小
imgBoxDom.width(consts.bigwidth + ‘px‘).height(consts.bigheight + ‘px‘);
var minX = opts.w / 2,
maxX = consts.midwidth - opts.w / 2,
minY = opts.h / 2,
maxY = consts.midheight - opts.h / 2;
} else {
var minX = opts.w / (opts.range * 2),
maxX = consts.midwidth - opts.w / (opts.range * 2),
minY = opts.h / (opts.range * 2),
maxY = consts.midheight - opts.h / (opts.range * 2);
}
_this.on(‘mousemove‘, function(event) {
var mouse = new e(event);
var r = 2 / (opts.range - 1)
if (opts.style == 1) {
var zleft = zoomDiv.offset().left - left,
ztop = zoomDiv.offset().top - top;
} else {
var zleft = mouse.x - left - opts.w / 2,
ztop = mouse.y - top - opts.h / 2;
}
var pageX = mouse.x - left,
pageY = mouse.y - top;
//判断蒙层的范围
if (pageX < maxX) {
pageX = pageX < minX ? minX : pageX
} else {
pageX = pageX > maxX ? maxX : pageX
}
if (pageY < minY) {
pageY = pageY < minY ? minY : pageY
} else {
pageY = pageY > maxY ? maxY : pageY
}
var zlocationX = pageX - opts.w / 2,
zlocationY = pageY - opts.h / 2;
if (opts.style == 1) {
zoomDiv.css({
left: zlocationX,
top: zlocationY
});
zoomImg.css({
left: -zleft * opts.range + ‘px‘,
top: -ztop * opts.range + ‘px‘
})
} else {
imgBoxDom.css({
left: zlocationX,
top: zlocationY,
});
imgBoxDom.animate({
scrollLeft: zleft * opts.range + opts.w / r,
scrollTop: ztop * opts.range + opts.h / r
}, 0);
}
});
}, function() {
if (opts.style == 1) {
$(‘.zoomDiv‘).remove();
$(‘.rangeDiv‘).remove();
} else {
imgBoxDom.hide();
zoomImg.remove();
}
});
});
}
})(jQuery);
$(‘#imgDiv‘).imgZoom({
range: 5,
w: 200,
h: 200,
zoomDom: ‘.imgBox‘
});
$(‘#imgDiv2‘).imgZoom({
range: 5,
w: 300,
h: 300,
zoomDom: ‘.zoomGlass‘,
style: 2
});
</script>
基于jquery的放大镜插件