js面向对象实现放大镜
2021-02-07 15:18
阅读：361
YPE >
标签：title image spl DPoS sele mask load color 放大
html>
* {
margin: 0;
padding: 0;
}
.small-box {
width: 200px;
height: 200px;
background-image: url(./img/10.jpg);
background-size: 200px 200px;
position: absolute;
top: 100px;
left: 100px;
}
.mask {
width: 100px;
height: 100px;
background-color: brown;
position: absolute;
opacity: 0.4;
display: none;
}
.big-box {
width: 400px;
height: 400px;
background-image: url(./img/10.jpg);
background-size: 800px 800px;
position: absolute;
top: 120px;
left: 350px;
display: none;
}
class magnifier {
constructor(newsmallbox, newmask, newbigbox) {
this.smallbox = newsmallbox;
this.mask = newmask;
this.bigbox = newbigbox;
}
//鼠标移入事件
onmouseover() {
let that = this;
this.smallbox.onmouseover = function () {
that.mask.style.display = "block";
that.bigbox.style.display = "block";
}
}
//鼠标离开事件
onmouseout() {
let that = this;
this.smallbox.onmouseout = function () {
that.mask.style.display = "none";
that.bigbox.style.display = "none";
}
}
//鼠标移动事件
onmousemove() {
let that = this;
this.smallbox.onmousemove = function (eve) {
//mask跟随鼠标移动，且鼠标在mask的中心（先保存）
let e = eve || event;
let left = e.pageX - this.offsetLeft - (that.mask.offsetWidth) / 2;
let top = e.pageY - this.offsetTop - (that.mask.offsetHeight) / 2;
//判断边界
if (left
left = 0;
}
let maxleft = this.offsetWidth - that.mask.offsetWidth;
if (left > maxleft) {
left = maxleft;
}
if (top
top = 0;
}
let maxtop = this.offsetHeight - that.mask.offsetHeight;
if (top > maxtop) {
top = maxtop;
}
//mask跟随鼠标移动，且鼠标在mask的中心
that.mask.style.top = top + "px";
that.mask.style.left = left + "px";
//鼠标移动时让大盒子的背景图跟着移动
let x = (left * that.bigbox.offsetWidth) / that.mask.offsetWidth;
let y = (top * that.bigbox.offsetHeight) / that.mask.offsetHeight;
//大背景图
that.bigbox.style.backgroundPositionX = -x + "px";
that.bigbox.style.backgroundPositionY = -y + "px";
}
}
}
let osmallbox = document.querySelector(".small-box");
let omask = document.querySelector(".mask");
let obigbox = document.querySelector(".big-box")
let mg = new magnifier(osmallbox, omask, obigbox);
mg.onmouseover();
mg.onmouseout();
mg.onmousemove();
js面向对象实现放大镜
标签：title image spl DPoS sele mask load color 放大
原文地址：https://www.cnblogs.com/bwnnxxx123/p/13089772.html
评论
亲，登录后才可以留言！