html5中增加了一个新的鼠标事件onmousewheel 这个事件使用的时候要注意使用方法，不然就不会起到作用，下面是一个实例
html文件
<!DOCTYPE html><html><head><meta charset="utf-8"><title>图片变换</title><style type="text/css">#image-content{border: 1px solid green;}</style></head><body><div class="content"><canvas id="image-content" width="800" height="600">你的浏览器不支持html5</canvas></div><script src="imagetrans.js"></script></body></html>
imagetrans.js
var canvas=document.getElementById('image-content');var content=canvas.getContext("2d");if (canvas.addEventListener) {// IE9, Chrome, Safari, Operacanvas.addEventListener("mousewheel", scaleCanvas, false);// Firefoxcanvas.addEventListener("DOMMouseScroll", scaleCanvas, false);}else{// IE 6/7/8canvas.attachEvent("onmousewheel", scaleCanvas);}function scaleCanvas(event){event.preventDefault();var e = window.event || event; // old IE supportvar delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));alert(delta+"->"+ e.wheelDelta+'->'+ e.detail);}
需要注意的是在不同浏览器中addEventListener的code不一样，而获取滑轮是向上滚动还是向下滚到也要注意
