javascript 鼠标滚轮事件
更新时间：2009年04月09日 18:05:22 作者：
由于鼠标滚轮事件在 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 实现滚动条的功能
复制代码 代码如下:
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');
其中 handle 函数必须有且只有一个参数delta，滚轮往上滚时 delta 大于 0，往下则小于 0。上例 handle 函数的作用是用滚轮对 div 实现滚动条的功能
相关文章
下面小编就为大家带来一篇Javascript 一些需要注意的细节(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要为大家详细介绍了微信小程序实现简单秒表设计，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要给大家介绍了关于angular 8.1使用过程中的一些记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
初学js插入节点appendChild insertBefore使用方法
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。2011-07-07
本文主要介绍了three.js的基础知识。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了javascript字符串循环匹配,实例分析三种常用的字符串循环匹配的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了灵活使用console让js调试更简单的方法步骤，适当使用这些方法可以使调试更容易，更快速，更直观，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04![在JavaScript中获取请求的URL参数[正则]](//img.jbzj.com/images/xgimg/bcimg7.png)
在ASP.NET后台代码中，对于这样的URL请求地址：http://www.abc.com?id=001,我们可以通过Request.QueryString["id"]的方法很容易的获取到URL中请求的参数的值，但是要在前台js代码中获取请求的参数的值，应该怎么做呢？2010-12-12
这篇文章主要介绍了Javascript之图片的延迟加载的实例详解的相关资料,这里对延迟加载和异步加载进行了详解和使用方法，需要的朋友可以参考下2017-07-07
javascript动画对象支持加速、减速、缓入、缓出的实现代码
javascript动画对象支持加速、减速、缓入、缓出的实现代码，需要的朋友可以参考下2012-09-09
![在JavaScript中获取请求的URL参数[正则]](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论