Javascript鼠标滚轮编程
2015-08-31 11:18
169 查看
主要是得到滚轮是向上滚还是向下滚。
<script language="JavaScript" type="text/javascript">
function handle(delta) {
if (delta < 0)
alert("向下滚动");
else
alert("向上滚动");
}
/** 事件句柄
*/
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE或者Opera. */
delta = event.wheelDelta/120;
/** 在Opera9中,事件处理不同于IE
*/
if (window.opera)
delta = -delta;
} else if (event.detail) { /** 兼容Mozilla. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** 如果 增量不等于0则触发
* 主要功能为测试滚轮向上滚或者是向下
*/
if (delta)
handle(delta);
}
/** 初始化 */
if (window.addEventListener)
/** Mozilla的基于DOM的滚轮事件 **/
window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
</script>
在上面的代码中,handler函数里的代码就是你要写的,它有一个参数-delta,事实上,它只是代码鼠标此刻是向上滚或者是向下滚。如下所示:
<script language="JavaScript" type="text/javascript">
function handle(delta) {
if (delta < 0)
alert("向下滚动");
else
alert("向上滚动");
}
/** 事件句柄
*/
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE或者Opera. */
delta = event.wheelDelta/120;
/** 在Opera9中,事件处理不同于IE
*/
if (window.opera)
delta = -delta;
} else if (event.detail) { /** 兼容Mozilla. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** 如果 增量不等于0则触发
* 主要功能为测试滚轮向上滚或者是向下
*/
if (delta)
handle(delta);
}
/** 初始化 */
if (window.addEventListener)
/** Mozilla的基于DOM的滚轮事件 **/
window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
</script>
在上面的代码中,handler函数里的代码就是你要写的,它有一个参数-delta,事实上,它只是代码鼠标此刻是向上滚或者是向下滚。如下所示:
相关文章推荐
- 推荐几本 Javascript 书籍
- javascript命名规范
- JavaScript学习笔记3-附录(Java的各类型数据在内存中分配情况详解)
- js控制限制输入数字,限制输入中文
- JavaScript 键盘event.keyCode值列表大全
- [C#技术] .NET平台开源JSON库LitJSON的使用方法(转载)
- 《JSF教程》-03 环境搭建与第一个入门例子
- javascript闭包的理解
- JavaScript学习笔记
- javascript中的函数Function
- WebStorm安装ext js插件
- 学习javascript设计模式之代理模式
- js方式的页面跳转
- javascript 折后保留一位小数
- js实现设置首页和加入收藏详细版
- JS继承
- 数据验证插件的使用validator.js
- js 回车键 跳转到下一个输入框
- Join Resig's “Simple JavaScript Inheritance ”
- Javascript 异步编程的4种方法