html5鼠标滚轮事件mousewheel使用

最新推荐文章于 2022-07-19 19:33:25 发布

pj_me

最新推荐文章于 2022-07-19 19:33:25 发布

阅读量1.4k

点赞数

分类专栏： HTML5和CSS3 文章标签： html5 canvas 鼠标滚轮事件 javascript mousewheel

HTML5和CSS3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

关注

0
点赞
踩
0

收藏

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

html5中增加了一个新的鼠标事件onmousewheel 这个事件使用的时候要注意使用方法，不然就不会起到作用，下面是一个实例
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。