html5鼠标滚轮事件mousewheel使用

返回顶部
查看留言
转到底部

现在的位置: 首页 > 综合 > 正文

html5鼠标滚轮事件mousewheel使用

2014年08月20日 ⁄ 综合 ⁄ 共 957字 ⁄ 字号小中大 ⁄ 评论关闭

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

需要注意的是在不同浏览器中addEventListener的code不一样，而获取滑轮是向上滚动还是向下滚到也要注意