html5鼠标滚轮事件mousewheel使用

最新推荐文章于 2022-11-09 15:23:48 发布

cclehui

最新推荐文章于 2022-11-09 15:23:48 发布

阅读量1.4w

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/clh604/article/details/8559887

版权

html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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不一样，而获取滑轮是向上滚动还是向下滚到也要注意

cclehui

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html5鼠标滚轮事件mousewheel使用

html5中增加了一个新的鼠标事件onmousewheel 这个事件使用的时候要注意使用方法，不然就不会起到作用，下面是一个实例html文件图片变换 #image-content{ border: 1px solid green; } 你的
复制链接

扫一扫