html 鼠标中间滚动事件,html 5中的鼠标滚动事件

在web中，要是鼠标的滚动轴的事件能利用起来，那是十分好的事情。比如鼠标轮轴滚动时，图片可以自由放大和缩小。

很多浏览器中，都支持mousewheel事件，并且有wheelDelta 属性，

支持正数的值话向上鼓动，负数的话向下滚动，但可惜firfox中，对这个的规定

是刚好相反的，正数的话向下滚动，负数的向上滚动，并且实现的事件是

DOMMouseScroll。

下面例子说明下如何用这个事件，比如有一张图：

 

var myimage = document.getElementById("myimage");

if (myimage.addEventListener) {

// IE9, Chrome, Safari, Opera

myimage.addEventListener("mousewheel", MouseWheelHandler, false);

// Firefox

myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);

}

// IE 6/7/8

else myimage.attachEvent("onmousewheel", MouseWheelHandler);

我们还要纠正firefox这个奇怪的规定，

function MouseWheelHandler(e) {

var e = window.event || e; // old IE support

var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";

return false;

}

这个功能在IE，CHROME下，FIERFOX下都可以了，但SAFRI是不行的