JS-以鼠标位置为中心的滑轮放大功能demo1
时间: 2024-02-11 16:04:47 浏览: 22
好的,这是一个可以实现以鼠标位置为中心的滑轮放大功能的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>以鼠标位置为中心的滑轮放大功能</title>
<style>
#container {
position: relative;
width: 500px;
height: 500px;
overflow: hidden;
}
#image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.5s ease;
transform-origin: 0 0;
}
</style>
</head>
<body>
<div id="container">
<img id="image" src="your-image-src.jpg" alt="your-image-description">
</div>
<script>
var container = document.getElementById("container");
var image = document.getElementById("image");
var zoomLevel = 1;
container.addEventListener("wheel", function(event) {
event.preventDefault();
var mouseX = event.clientX - container.offsetLeft;
var mouseY = event.clientY - container.offsetTop;
var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
var zoomStep = 0.1;
var zoomFactor = (1 + delta * zoomStep);
var offsetX = (mouseX - container.clientWidth / 2) / container.clientWidth / 2;
var offsetY = (mouseY - container.clientHeight / 2) / container.clientHeight / 2;
zoomLevel *= zoomFactor;
image.style.transform = "scale(" + zoomLevel + ") translate(" + offsetX * 100 + "%, " + offsetY * 100 + "%)";
});
</script>
</body>
</html>
```
这段代码使用了`<img>`标签来显示图片,并将其放置在一个包含器`<div>`标签中。当滚轮事件发生时,它计算了鼠标相对于包含器的位置,并根据缩放比例和鼠标位置来设置图片的`transform`属性。
您可以将`your-image-src.jpg`替换为您自己的图片路径,并将`your-image-description`替换为您自己的图片描述。