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