以下是一个缩放的示例。我希望图像能够在鼠标位置上放大。如何实现?不使用任何库。
const image = document.querySelector('img');
const zoom = {
min: 1,
max: 3,
value: 1,
step: 0.1
};
image.addEventListener('wheel', event => {
event.preventDefault();
if (event.deltaY < 0) {
zoom.value = zoom.value >= zoom.max ? zoom.max : zoom.value + zoom.step;
} else if (event.deltaY > 0) {
zoom.value = zoom.value <= zoom.min ? zoom.min : zoom.value - zoom.step;
}
image.style.transform = `scale(${zoom.value})`
}
)
div {
width: 500px;
overflow: hidden;
}
img {
width: 100%;
}
<div>
<img src="https://picjumbo.com/wp-content/uploads/free-stock-photos-san-francisco-1080x720.jpg">
</div>