js实现放大镜效果

最新推荐文章于 2023-08-30 23:12:02 发布

viser123

最新推荐文章于 2023-08-30 23:12:02 发布

阅读量319

点赞数

分类专栏： js 前端网页优化文章标签： js web前端

本文链接：https://blog.csdn.net/viser123/article/details/50879792

版权

js 前端网页优化专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文在网上找的，为方便学习可随意转载，不必注明作者！

<!DOCTYPE html>

<html>
<head>
<meta charset="gb2312"/>
<title>放大镜</title>
<style>
img {
vertical-align: bottom;
}

.mod_zoom {
overflow: hidden;
zoom: 1;
}

.mod_zoom .p1 {
float: left;
position: relative;
height: 336px;
width: 350px;
margin-right: 5px;
}

.mod_zoom .p1 .mask {
position: absolute;
left: 0;
top: 0;
width: 175px;
height: 175px;
background-color: #ffffff;
opacity: 0.2;
filter: alpha(opacity=100);
display: none;
}

.mod_zoom .p2 {
position: relative;
width: 400px;
height: 400px;
overflow: hidden;
display: block;
}

.mod_zoom .p2 .img {
position: absolute;
left: 0;
top: 0;
}

.mod_zoom .ph {
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
cursor: crosshair;
/*background-color:red*/
/*如果给它绑定事件处理函数，IE中不设置background-color属性就不触发事件*/
}
</style>
</head>
<body>
<div>
<div class="mod_zoom">
<div class="p1" id="p1">
<img src="2.png" id="z1"/>
<span class="mask" id="m"></span>
<span class="ph" id="eventproxy"></span>
</div>
<div class="p2" id="p2">
<img src="1.png" class="img" id="z2"/>
</div>
</div>
</div>
<script>
function PhotoZoomer(elements) {
this.mask = elements.mask; //蒙版<span class="mask" id="m"></span>
this.container = elements.container; //原图容器
this.originimg = elements.originimg; //原图
this.eventproxy = elements.eventproxy;
this.bigContainer = elements.bigContainer; //大图容器
this.bigimg = elements.bigimg; //大图
this.visible = false;
this._bind();
}
PhotoZoomer.prototype = {
display: function (style) {
var self = this;
self.mask.style.display = style;
self.bigContainer.style.display = style;
},
//计算放大蒙版位置
zoom: function (clientX, clientY) {
var self = this,
//位置比例
rate = {},
//放大蒙版最大活动范围
maxrange = {
offsetLeft: self.container.offsetWidth - self.mask.offsetWidth,//原图容器的宽-蒙版的宽
offsetTop: self.container.offsetHeight - self.mask.offsetHeight
},
//mask left
left = clientX - self.container.offsetLeft - self.mask.offsetWidth / 2,
//mask top
top = clientY - self.container.offsetTop - self.mask.offsetHeight / 2;
if (left < 0) {
left = 0;
} else if (left > maxrange.offsetLeft) {
left = maxrange.offsetLeft;
}
if (top < 0) {
top = 0;
} else if (top > maxrange.offsetTop) {
top = maxrange.offsetTop;
}
//alert(maxrange.offsetTop);
rate.left = left / maxrange.offsetLeft;
rate.top = top / maxrange.offsetTop;
self.mask.style.left = left + 'px';
self.mask.style.top = top + 'px';
self.bigimg.style.left = -rate.left * (self.bigimg.offsetWidth - self.bigContainer.offsetWidth) + "px";
self.bigimg.style.top = -rate.top * (self.bigimg.offsetHeight - self.bigContainer.offsetHeight) + "px";
},
_bind: function () {
var self = this;
self.container.onmouseover = function (e) {
e = e || window.event;
var target = e.targe || e.srcElement;
self.display("block");
this.visible = true;
};
self.container.onmouseout = function (e) {
e = e || window.event;
var target = e.targe || e.srcElement;
self.display("none");
this.visible = false;
};
self.container.onmousemove = function (e) {
e = e || window.event;
if (!this.visible)return;//防止元素大小计算错误
self.zoom(e.clientX, e.clientY);
};
}
};
function get(id) {
return document.getElementById(id)
}
var elements = {
mask: get("m"),
container: get("p1"),
originimg: get("z1"),
bigContainer: get("p2"),
bigimg: get("z2"),
eventproxy: get("eventproxy")
};
var zoomer = new PhotoZoomer(elements);
// alert(elements.container.offsetParent.tagName)
</script>
</body>
</html>

viser123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现放大镜效果

本文在网上找的，为方便学习可随意转载，不必注明作者！放大镜img {vertical-align: bottom;}.mod_zoom {overflow: hidden;zoom: 1;}.mod_zoom .p1 {float: left;position: relative;height: 336px
复制链接

扫一扫