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具有一个非常有用的方法replace()，可以用它利用备选字符集途欢指定的字符，下面有个不错的示例，大家可以尝试操作下2013-10-10
在我们日常开发中经常要验证客户输入的手机号是否正确，有的时候还需要将中间的四位或者前几位用星号(*)代替，那该如何实现呢？下面跟着小编一起来看看。2016-08-08
apply和call方法定义及apply和call方法的区别
apply和call功能一样，只是传入的参数列表形式不同，本文给大家介绍apply和call方法定义及apply和call方法的区别，感兴趣的朋友一起学习吧2015-11-11
在uniapp中，如果你的富文本图片显示宽度不正常，你可以通过设置图片的宽高属性来解决这个问题，这篇文章主要介绍了uniapp在微信小程序中图片宽度显示问题,需要的朋友可以参考下2023-02-02
Javascript代码混淆综合解决方案-Javascript在线混淆器
Javascript代码混淆综合解决方案-Javascript在线混淆器...2006-12-12
uni-app调取接口的3种方式以及封装uni.request()详解
我们在实际工作中要将数据传输到服务器端,从服务器端获取信息,都是通过接口的形式,下面这篇文章主要给大家介绍了关于uni-app调取接口的3种方式以及封装uni.request()的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了uniapp自定义验证码输入框隐藏光标,效果是点击输入框唤起键盘，蓝框就相当于input的光标，验证码输入错误或者不符合格式要求会将字体以及边框改成红色提示持续1s然后清空数据，恢复原边框样式，需要的朋友可以参考下2023-02-02
在现代Web开发中，JavaScript已经成为无法替代的核心技术，在现代Web开发中，JavaScript已经成为无法替代的核心技术，本文将通过代码示例详细介绍一些实践解决方案，感兴趣的同学可以参考下2023-06-06
这篇文章主要介绍了小程序如何在不同设备上自适应生成海报的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了JS实现状态栏跑马灯文字效果代码,涉及JavaScript定时函数及流程控制的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
最新评论