js onmousewheel事件

 IE6, Opera9+, Safari2+以及Firefox1+均支持“onmousewheel”事件， 在FF 3.x中，与之相当的是“DOMMouseScroll”事件。“onmousewheel”作为事件名，不为其识别。

所以，为了保证能在每个浏览器中都能运行，就需要针对不同的浏览器来绑定不同的事件。

当该事件触发时，非firefox浏览器中，记录其距离的是“wheelDelta”，它返回的总是120的倍数（120表明mouse向上滚动，－120表明鼠标向下滚动）。在firefox中，记录其滚动距离的是“detail”属性，它返回的是3的倍数（3表明mouse向下滚动，－3表明mouse向上滚动）。

创建onmousewheel事件如下：

var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
 
if (document.attachEvent) //if IE (and Opera depending on user setting)
    document.attachEvent("on"+mousewheelevt, function(e){alert('Mouse wheel movement detected!')})
else if (document.addEventListener) //WC3 browsers
    document.addEventListener(mousewheelevt, function(e){alert('Mouse wheel movement detected!')}, false)

onmousewheel事件DEMO

变换图片：
<img id="slideshow" src="summer.jpg" />
 
<script type="text/javascript">
 
var myimages=[
    "summer.jpg",
    "spring.jpg",
    "winter.jpg"
]
 
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
 
function rotateimage(e){
    var evt=window.event || e //equalize event object
    var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up
    nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex //wrap image index around when it goes beyond lower and upper boundaries
    slideshow.src=myimages[nextslideindex]
    if (evt.preventDefault) //disable default wheel action of scrolling page
        evt.preventDefault()
    else
        return false
 
}
 
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
 
if (slideshow.attachEvent) //if IE (and Opera depending on user setting)
    slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener) //WC3 browsers
    slideshow.addEventListener(mousewheelevt, rotateimage, false)

</script>

图片放大：利用zoom实现 
<style>
img{
     zoom:0.6;      /*设置或检索对象的缩放比例。
                       取值：normal：使用对象的实际尺寸。
                                number：百分数|无符号浮点实数。浮点实数值为1.0或百分数100%时相当于此属性的normal值。*/
}
</style>
<script>
function bigimg(O){
     var zoom=parseInt(O.style.zoom,10)||100;
     zoom+=event.wheelDelta/12;
     if(zoom>0)O.style.zoom=zoom+'%';
     return false;
}
</script>

 或者也可以利用width，height来实现
var count = 10;
var slide_zoom=document.getElementById("slide_zoom")          
function zoom(delta){
     if (delta >= 1)
          Resize(++count);
     else if (delta <= -1)
          Resize(--count);   
}
function Resize(c){    
     slide_zoom.style.width = (c + 100 )+ '%';
     slide_zoom.style.height = (c + 100 )+ '%';
}
wheel(slide_zoom,function(e,delta){zoom(delta)},false);