<div>
<h1>原图</h1>
<img
src="https://so.360tres.com/dmsmty/160_160_100/t01b29734b9604fb7aa.webp"
/>
<h1>可放大缩小的图</h1>
<div class="imgView">
<img
src="https://so.360tres.com/dmsmty/160_160_100/t01b29734b9604fb7aa.webp"
/>
<img
src="https://so.360tres.com/dmsmty/160_160_100/t01b29734b9604fb7aa.webp"
/>
</div>
</div>
<script>
const imgView = document.querySelector(".imgView");
// 鼠标经过事件
imgView.onmouseover = (e1) => {
if (e1.target.nodeName === "IMG") {
var img = e1.target;
var widthW = img.width;
// 鼠标滚动事件
img.onmousewheel = (e) => {
// wheelDelta 判断滚轮往前滚还是往后滚: <0 是往后滚, >0是前滚
e.wheelDelta < 0 ? widthW-- : widthW++;
img.style.width = widthW;
};
}
};
</script>