前段时间本人在做项目时，做了一个鼠标滚动缩放图片效果，图片支持多个，多个图片循环缩放，花了点时间整理了下，把它贴出来，与大家分享下，在ie6.0,ie7.0,firefox都测试过，没有问题。
<html>
<head>
<title>鼠标滚动图片缩放</title>
<script language="javascript">
if (window.addEventListener)
{
window.addEventListener('DOMMouseScroll', wheel, false);//给firefox添加鼠标滚动事件
}
function wheel(event)
{
return wheelimg(event);
}
function bbimg()
{
var div = document.getElementById("div1");
var allImg = div.getElementsByTagName("IMG");
for(i=0;i<allImg.length;i++)
{
var zoom=parseInt(allImg[i].style.zoom, 10)||100;
zoom+=event.wheelDelta/12;
if (zoom>0) allImg[i].style.zoom=zoom+'%';
}
}
function wheelimg(event)
{
var delta = 0;
var div = document.getElementById("div1");
if (event.detail)
{
//如果是firefox
var allImg = div.getElementsByTagName("IMG");
var isThis=false;//现判断鼠标中仑的元素是不是包含在那个div里面
for(i=0;i<allImg.length;i++)
{
isThis=true;
allImg[i].width=allImg[i].width+event.detail*12;
event.returnValue = false;
}
}
return true;
}
</script>
</head>
<body onmousewheel="bbimg()">
<form id="form1" runat="server">
<div id="div1">
<img id="wheelimg" src="http://farm3./2782/4098845549_fe43958798.jpg" style="cursor: pointer;" border="0" />
<img id="wheelimg1" src="http://farm3./2448/4099603568_69b7811d55.jpg" style="cursor: pointer;" border="0" />
</div>
</form>
</body>
</html>
