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

Javascript
csdn 博客的css样式 v3
javascript 常用代码技巧大收集
javascript div 弹出可拖动窗口
jQuery 使用个人心得
ajax 文件上传应用简单实现
用正则表达式 动态创建/增加css style script 兼容IE firefox
10个新的最有前途的JavaScript框架
自动完成JS类(纯JS, Ajax模式)
JavaScript 颜色梯度和渐变效果
IE6与IE7中,innerHTML获取param的区别
for 循环性能比较 提高for循环的效率
Ext javascript建立超链接,进行事件处理的实现方法
利用javascript移动div层-javascript 拖动层
jQuery 全选效果实现代码
一个tab标签切换效果代码
提取自百度有啊的css圆角效果
可左右平滑滚动的产品展示效果
响应鼠标变换表格背景或者颜色的代码
ymyang 绘图 实例代码
JS 单击连接保存图片的函数

Javascript 中的 javascript 鼠标滚轮事件


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

由于鼠标滚轮事件在 IE 和 FF 的实现有点不一样,所以有需要把这个写成一个统一可用的事件。 今天在网上找来了响应滚轮的函数并改写成下面的类
复制代码 代码如下:

function wheelEvent(obj, handle)
{
this.handle = handle;
// different events between Firefox and IE
window.addEventListener ? obj.addEventListener("DOMMouseScroll", this.wheel, false) : (obj.onmousewheel = this.wheel);
}
wheelEvent.prototype.wheel = function (event)
{
var ev = event || window.event;
var delta = ev.wheelDelta ? (ev.wheelDelta / 120) : (- ev.detail / 3); // Firefox using `wheelDelta` IE using `detail`
eval ('delta ? ' + parent.handle + '(delta) : null;');
}

在使用的时候需要定义一个执行函数,用以根据从上述类中获得的值进行操作,并为指定的网页元素添加事件。比如
复制代码 代码如下:

function handle(delta)
{
document.getElementById('text').scrollTop -= delta * 20;
}
new wheelEvent(document.getElementById('text'), 'handle');
在上例中第一个参数是添加滚轮事件的网页元素, id 为 text 的 div;第二个参数是执行函数的名字 handle。
其中 handle 函数必须有且只有一个参数delta,滚轮往上滚时 delta 大于 0,往下则小于 0。上例 handle 函数的作用是用滚轮对 div 实现滚动条的功能