以鼠标为中心点,transform进行图片缩放的JavaScript代码
时间: 2024-02-11 08:04:56 浏览: 24
以下是以鼠标为中心点进行图片缩放的JavaScript代码:
```javascript
// 获取图片对象
var img = document.getElementById("myImage");
// 监听鼠标滚轮事件
img.addEventListener("wheel", function(e) {
// 阻止默认事件,避免页面滚动
e.preventDefault();
// 计算缩放比例
var scale = e.deltaY > 0 ? 0.9 : 1.1;
// 获取鼠标相对于图片左上角的坐标
var x = e.clientX - img.offsetLeft;
var y = e.clientY - img.offsetTop;
// 计算缩放后的坐标
var newX = x * scale;
var newY = y * scale;
// 计算坐标的偏移量
var deltaX = newX - x;
var deltaY = newY - y;
// 设置 transform 属性
img.style.transformOrigin = deltaX + "px " + deltaY + "px";
img.style.transform = "scale(" + scale + ")";
});
```
其中,`myImage` 是图片的 id,可以根据实际情况进行修改。这段代码通过监听鼠标滚轮事件,获取鼠标相对于图片左上角的坐标,并根据鼠标滚动方向计算缩放比例,最后设置 transform 属性实现图片缩放。