JS鼠标滚轮放大和缩小图片的问题~

JavaScript019

JS鼠标滚轮放大和缩小图片的问题~,第1张

这个要求把css写精细一点

我的想法是

为div和img添加onmouseover事件

监听到这个事件时再为这个事件的响应元素添加onmousewheel事件

在onmouseout事件中将放大缩小的响应移除

这里要求img所在层要高于div，即让img响应onmouseover事件但不让下层的div响应

单个图片最好使用绝对定位，以免放大缩小造成整个图片集合的排版错乱

用js控制图片额大小。主要是修改图片的宽度和高度。下面是简单的代码实现：

HTML 代码：

<img src='../1.jgp' id='img' />

这个时候img的图片自身是多大，就会显示多大。100px*100px的图。

js代码：

var oImg = document.getElementById('img')

oImg.width = '50px' //当给img标签的宽度设置为50px后，高度会自动按比例缩小。

oImg.width = '200px' //当给img标签的宽度设置为200px后，高度会自动按比例扩大。