我的想法是
为div和img添加onmouseover事件
监听到这个事件时再为这个事件的响应元素添加onmousewheel事件
在onmouseout事件中将放大缩小的响应移除
这里要求img所在层要高于div，即让img响应onmouseover事件但不让下层的div响应
单个图片最好使用绝对定位，以免放大缩小造成整个图片集合的排版错乱
可以用js事件“onmouseover”和“onmouseout”来实现。
1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：
2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：
3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：
分别写一个onmouseover和onmouseout事件。然后在事件里面加一个function，分别写想要放大的尺寸和缩小或复原的尺寸。
具体代码实现如下：
<img id="img" onmouseover="bigger()" onmouseout="smaller()" src="你的图片路径" style="width:100pxheight:100px" />
<script type="text/javascript">
var img = document.getElementById('img')
function bigger(){
img.style.width = '400px'
img.style.height = '400px'
}
function smaller(){
img.style.width = '100px'
img.style.height = '100px'
}
</script>
扩展资料：
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
参考资料：
JavaScript官方API接口-GlobalEventHandlers.onmouseover
JavaScript官方API接口-GlobalEventHandlers.onmouseout
W3cSchool-JavaScript 事件参考手册
