html5鼠标滚轮事件mousewheel使用

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="data:imagetrans.js"></script>
</body>
</html>

imagetrans.js

var canvas=document.getElementById('image-content');
var content=canvas.getContext("2d");if (canvas.addEventListener) {// IE9, Chrome, Safari, Operacanvas.addEventListener("mousewheel", scaleCanvas, false);// Firefoxcanvas.addEventListener("DOMMouseScroll", scaleCanvas, false);
}else{// IE 6/7/8canvas.attachEvent("onmousewheel", scaleCanvas);
}function scaleCanvas(event){event.preventDefault();var e = window.event || event; // old IE supportvar delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));alert(delta+"->"+ e.wheelDelta+'->'+ e.detail);
}

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

html5鼠标滚轮事件mousewheel使用相关推荐

JS鼠标滚轮事件mousewheel实现翻页（记录）
JS鼠标滚轮事件mousewheel实现翻页(PPT?) 整体思路(趁还能看懂自己的代码) 1.我想模拟那些不用滚动条,像PPT一样滚动的页面,于是乎想到了mousewheel事件 2.我又想再页面右 ...
java响应鼠标滚轮事件_鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
鼠标滚轮事件mousewheel和DOMMouseScroll
非Firefox:mousewheel, 可通过event.wheelDelta获取滚动信息,正数:向上滚动,负数:向下滚动,滚动一次值为正负120 Firefox:DOMMouseScroll,可通 ...
鼠标滚轮事件java_JavaScript 事件——“事件类型”中“焦点、鼠标和滚轮事件”的注意要点...
焦点事件一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合.主要有: blur:元素失去焦点,不会冒泡: DOMFocusIn:同HT ...
html如何设置滑轮效果,HTML中鼠标滚轮事件onmousewheel处理
滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件 ...
html 页面缩放事件,使用HTML5实现通过鼠标滚轮事件放大和缩小图片的功能
您和我都知道,向HTML5网页添加鼠标滚轮事件可以更好地允许用户与网页进行交互. 在HTML5中,鼠标滚轮不仅可以在网页上上下滑动,实际上,您还可以依靠它来完成更,例如放大和缩小视图平面. 看看实际的 ...
C# 中panel的mousewheel鼠标滚轮事件触发
如果将窗体或容器控件(如Panel控件)的AutoScroll属性设置为True时,那么当窗体或Panel容不下其中的子控件时就会出现滚动条,通过移动滚动条可以上下显示出窗体或Panel中的全部内容 ...
Winform 中panel的mousewheel鼠标滚轮事件触发
如果将窗体或容器控件(如Panel控件)的AutoScroll属性设置为True时,那么当窗体或Panel容不下其中的子控件时就会出现滚动条,通过移动滚动条可以上下显示出窗体或Panel中的全部内容 ...
C# 中手动添加Mousewheel鼠标滚轮事件
如果将窗体或容器控件(如Panel控件)的AutoScroll属性设置为True时,那么当窗体或Panel容不下其中的子控件时就会出现滚动条,通过移动滚动条可以上下显示出窗体或Panel中的全部内容 ...

html5鼠标滚轮事件mousewheel使用

html5鼠标滚轮事件mousewheel使用相关推荐

最新文章

热门文章