hbuilderx鼠标移动图片放大交互
时间: 2023-11-29 20:46:24 浏览: 74
以下是使用HBuilderX实现鼠标移动图片放大交互的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移动图片放大交互</title>
<style>
#smallImg {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
}
#smallImg img {
width: 100%;
height: 100%;
}
#bigImg {
width: 800px;
height: 800px;
position: absolute;
top: 0;
left: 420px;
display: none;
overflow: hidden;
}
#bigImg img {
width: 800px;
height: 800px;
position: absolute;
top: 0;
left: 0;
}
#mask {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
display: none;
background-color: rgba(0, 0, 0, 0.5);
cursor: move;
}
</style>
</head>
<body>
<div id="smallImg">
<img src="small.jpg" alt="小图">
<div id="mask"></div>
</div>
<div id="bigImg">
<img src="big.jpg" alt="大图">
</div>
<script>
var smallImg = document.getElementById("smallImg");
var mask = document.getElementById("mask");
var bigImg = document.getElementById("bigImg");
var bigImgChild = bigImg.children[0];
smallImg.onmouseover = function() {
mask.style.display = "block";
bigImg.style.display = "block";
}
smallImg.onmouseout = function() {
mask.style.display = "none";
bigImg.style.display = "none";
}
smallImg.onmousemove = function(event) {
var x = event.clientX - smallImg.offsetLeft - mask.offsetWidth / 2;
var y = event.clientY - smallImg.offsetTop - mask.offsetHeight / 2;
var maxX = smallImg.offsetWidth - mask.offsetWidth;
var maxY = smallImg.offsetHeight - mask.offsetHeight;
x = x < 0 ? 0 : x > maxX ? maxX : x;
y = y < 0 ? 0 : y > maxY ? maxY : y;
mask.style.left = x + "px";
mask.style.top = y + "px";
var bigImgX = x * (bigImgChild.offsetWidth - bigImg.offsetWidth) / maxX;
var bigImgY = y * (bigImgChild.offsetHeight - bigImg.offsetHeight) / maxY;
bigImgChild.style.left = -bigImgX + "px";
bigImgChild.style.top = -bigImgY + "px";
}
</script>
</body>
</html>
```