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, 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);
}