<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>