html5中增加了一個新的鼠標事件onmousewheel 這個事件使用的時候要注意使用方法，不然就不會起到作用，下面是一個實例。
你只需要新建一個html文件，然後將以下html代碼複製過去，然後在你的html文件中引入imagetrans.js即可。
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){
- <span style="color:#009900;">event.preventDefault();
- var e = window.event || event; // old IE support
- var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));</span>
- alert(delta+"->"+ e.wheelDelta+'->'+ e.detail);
- }
需要注意的是在不同瀏覽器中addEventListener的code不一樣，而獲取滑輪是向上滾動還是向下滾到也要注意