当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 鼠标滚轮编程

Javascript
javascript options属性集合操作代码
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
javascript 显示当前系统时间代码
firefox和IE系列的相关区别整理 以备后用
extJs 常用到的增,删,改,查操作代码
Javascript 面向对象特性
JavaScript的public、private和privileged模式
通过javascript设置css属性的代码
javascript iframe编程相关代码
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
js DOM模型操作
js 学习笔记(三)
用js做一个小游戏平台 (一)
jquery UI 1.72 之datepicker
jQuery的三种$()
JavaScript 常用函数
用javascript实现源代码的隐藏与解密的方法
javascript Onunload与Onbeforeunload使用小结
Javascript的闭包
JavaScript 对Cookie 操作的封装小结

Javascript 中的 鼠标滚轮编程


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-10   浏览: 118 ::
收藏到网摘: n/a

以前没有注意到这个滚轮,看到这里有一篇说这个的:http://www.javascriptsearch.com/guides/Advanced/articles/JSMouseScrolling.html
我把它转过来了。如果是在实际应用中,有的时候还是蛮有用的。主要是得到滚轮是向上滚还是向下滚。
注释的代码

function handle(delta) {
if (delta < 0)
…;
else
…;
}
/** 事件句柄
*/
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;

在上面的代码中,handler函数里的代码就是你要写的,它有一个参数-delta,事实上,它只是代码鼠标此刻是向上滚或者是向下滚。如下所示,
uploads/200608/02_013450_deltas.gif
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]