怎么样通过jQuery实现滚动鼠标放大缩小图片

JavaScript017

怎么样通过jQuery实现滚动鼠标放大缩小图片,第1张

很简单啊，先把图片用css缩小，再用js滑过的时候放大就好啦，图省事我就把js直接写在图片上了，你可以自己抽出来：

<img src="1.jpg" width="50" height="50" onMouseOver="this.width='300'this.height='300'" onMouseOut="this.width='50'this.height='50'">

或者更简单的，直接用css控制，连js都不用写了：

<style>

#Img1{ width:50pxheight:50px}

#Img1:hover{ width:300pxheight:300px}

</style>

<img src="1.png" width="50" height="50" id="Img1">

这个要求把css写精细一点

我的想法是

为div和img添加onmouseover事件

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

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

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

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