html放大镜js代码
时间: 2023-12-25 22:29:40 浏览: 33
以下是一个简单的HTML放大镜的JS代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: relative;
width: 400px;
height: 400px;
overflow: hidden;
}
.mask {
position: absolute;
width: 100px;
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
cursor: move;
}
.big {
position: absolute;
top: 0;
left: 400px;
width: 400px;
height: 400px;
overflow: hidden;
}
.bigImg {
position: absolute;
width: 800px;
height: 800px;
transform: scale(2);
transform-origin: top left;
transition: transform 0.2s ease-in-out;
}
</style>
</head>
<body>
<div class="box">
<img src="images/small.jpg">
<div class="mask"></div>
<div class="big">
<img src="images/big.jpg" class="bigImg">
</div>
</div>
<script>
var box = document.querySelector('.box');
var mask = document.querySelector('.mask');
var bigImg = document.querySelector('.bigImg');
box.addEventListener('mousemove', function(e) {
var x = e.clientX - box.offsetLeft - mask.offsetWidth / 2;
var y = e.clientY - box.offsetTop - mask.offsetHeight / 2;
if (x < 0) {
x = 0;
}
if (y < 0) {
y = 0;
}
if (x > box.offsetWidth - mask.offsetWidth) {
x = box.offsetWidth - mask.offsetWidth;
}
if (y > box.offsetHeight - mask.offsetHeight) {
y = box.offsetHeight - mask.offsetHeight;
}
mask.style.left = x + 'px';
mask.style.top = y + 'px';
var scaleX = bigImg.offsetWidth / box.offsetWidth;
var scaleY = bigImg.offsetHeight / box.offsetHeight;
bigImg.style.transform = 'translate(' + -x * scaleX + 'px, ' + -y * scaleY + 'px)';
});
box.addEventListener('mouseenter', function() {
mask.style.display = 'block';
bigImg.style.display = 'block';
});
box.addEventListener('mouseleave', function() {
mask.style.display = 'none';
bigImg.style.display = 'none';
});
</script>
</body>
</html>
```
这段代码实现了一个简单的HTML放大镜效果。当鼠标在小图上移动时,会在大图中显示对应区域的放大图像。通过计算鼠标在小图上的位置,调整遮罩层和大图的位置,实现放大镜效果。