<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 520px;
height: 293px;
position: relative;
}
.box img {
width: 100%;
}
.masker {
width: 160px;
height: 160px;
background: rgba(151, 238, 234, 1);
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
display: none;
pointer-events: none;
cursor: pointer;
}
.big-box {
width: 800px;
height: 800px;
position: absolute;
top: 0;
left: 560px;
border: 1px solid red;
overflow: hidden;
display: none;
}
.big-box img {
width: 1422px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<!-- 小图片 -->
<img src="https://images5.alphacoders.com/116/thumb-1920-1166934.jpg" alt="">
<!-- 遮罩层 -->
<div class="masker"></div>
<div class="big-box">
<!-- 大图片 -->
<img src="https://images5.alphacoders.com/116/thumb-1920-1166934.jpg" alt="">
</div>
</div>
<script>
// 获取box
var box = document.querySelector('.box')
// 获取遮罩层
var masker = document.querySelector('.masker')
// 获取右侧框
var bigBox = document.querySelector('.big-box')
// 获取大图
var bigImg = document.querySelector('.big-box img')
// 给小图添加鼠标移入事件,鼠标移入显示遮罩层和右侧的大盒子
box.addEventListener('mouseover', function () {
masker.style.display = 'block'
bigBox.style.display = 'block'
})
// 给小图添加鼠标移出事件,鼠标移出时,遮罩层和右侧大图隐藏
box.addEventListener('mouseout', function () {
masker.style.display = 'none'
bigBox.style.display = 'none';
})
box.addEventListener('mousemove', function (e) {
e = e || window.event
console.log(e.offsetX, e.offsetY);
// 获取光标在左侧小图盒子内的坐标点
var x = e.offsetX - masker.offsetWidth / 2;
var y = e.offsetY - masker.offsetHeight / 2;
// masker的最大偏移量
var maxX = box.offsetWidth - masker.offsetWidth;
var maxY = box.offsetHeight - masker.offsetHeight;
if (x < 0) {
// 当给masker设置的偏移量小于0时,给其设置为0 目的就是不让masker溢出小图框
x = 0
} else if (x > maxX) {
x = maxX
}
if (y < 0) {
//当给masker设置的偏移量小于0时,给其设置为0 目的就是不让masker溢出小图框
y = 0
} else if (y > maxY) {
y = maxY
}
// 给黄色遮罩设置偏移量使跟随光标移动
masker.style.left = x + 'px'
masker.style.top = y + 'px'
// 大图的最大偏移量
var bgImgX = bigImg.offsetWidth - bigBox.offsetWidth;
var bgImgY = bigImg.offsetHeight - bigBox.offsetHeight;
// 右大图的实际的偏移量
var bgX = x * bgImgX / maxX
var bgY = y * bgImgY / maxY
//将大图的实际偏移量赋值
bigImg.style.left = -bgX + 'px';
bigImg.style.top = -bgY + 'px';
})
</script>
</body>
</html>
怎样用js写放大镜?
最新推荐文章于 2023-08-23 15:31:17 发布