每日一kun:你无法叫醒一个,不回你消息的人,但是红包能。
一天不写JS,浑身难受,今天玩个放大镜,JS代码不难,主要难的就是怎么算距离,和等比例显示放大后的图片,话不多说,上代码。
js代码
var min = document.querySelector(".min")
var max = document.querySelector(".max")
var mask = document.querySelector(".mask")
var img = document.querySelectorAll("img")
min.addEventListener("mouseover", function () {
mask.style.display = "block"
max.style.display = "block"
min.addEventListener("mousemove", function (e) {
mask.style.left = e.pageX - min.offsetLeft - mask.offsetWidth / 2 + "px"
mask.style.top = e.pageY - min.offsetTop - mask.offsetHeight / 2 + "px"
img[1].style.left = -(e.pageX - min.offsetLeft - mask.offsetWidth / 2) * (img[1].offsetWidth - max.offsetWidth) / (min.offsetWidth - mask.offsetWidth) + "px"
img[1].style.top = -(e.pageY - min.offsetTop - mask.offsetHeight / 2) * (img[1].offsetHeight - max.offsetHeight) / (min.offsetHeight - mask.offsetHeight) + "px"
if (mask.offsetLeft <= 0) {
mask.style.left = "0px"
} else if (mask.offsetLeft > (min.offsetWidth - mask.offsetWidth)) {
mask.style.left = min.offsetWidth - mask.offsetWidth + "px"
}
if (mask.offsetTop < 0) {
mask.style.top = "0px"
} else if (mask.offsetTop >= (min.offsetHeight - mask.offsetHeight)) {
mask.style.top = min.offsetHeight - mask.offsetHeight + "px"
}
})
})
min.addEventListener("mouseout", function () {
mask.style.display = "none"
max.style.display = "none"
})
html代码
<div class="'main">
<div class="min">
<img src="./image/760b022fa6c40664.jpg.avif">
<div class="mask">
</div>
</div>
<div class="max">
<img src="./image/760b022fa6c40664.jpg(4).avif">
</div>
</div>
css代码
.main{
position: relative;
}
.min{
position: absolute;
left: 200px;
top: 100px;
cursor: move;
}
.mask{
width: 200px;
height: 200px;
position: absolute;
background-color: yellowgreen;
top: 0;
left: 0;
opacity: 0.5;
display: none;
}
.max{
position: absolute;
left: 650px;
width: 500px;
height: 500px;
overflow: hidden;
display: none;
top: 100px;
}
.max img{
position: absolute;
}
核心算法就是,小图片移动的距离/小图片最大移动距离 = 大图片移动的距离/大图片最大移动距离,由上可得,大图片移动的距离=小图片移动的距离*大图片最大移动距离/小图片最大移动距离,上面的算法小图片移动的距离,大图片最大移动距离,小图片最大移动距离都可以通过JS方法算出来。
图片可以自己换个,找两个图片,一个大一个小。
结果
Bug:刚开始有个小bug左右移动正常,当上下移动到边界时遮罩层就会抖动,找了半天才发现是if判断问题,刚开始是以为js if不能写超过else if ,因为我把第二个else if 改成if 放大镜就能正常显示了,后来百度说JS可以嵌套7层,所以应该不是这个问题,后来想了想,问题应该是if里面的判断条件不能出现另一个,你一个if判断mask.offsetLeft就不能在这个if下面的else if判断mask.offsetTop,虽然不会报错,但会让遮罩层从上面出去。