javascript 鼠标滚轮事件


Posted in Javascript onApril 09, 2009

今天在网上找来了响应滚轮的函数并改写成下面的类

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 实现滚动条的功能
Javascript 相关文章推荐
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
Javascript的promise,async和await的区别详解
Mar 24 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 #Javascript
用js实现的检测浏览器和系统的函数
Apr 09 #Javascript
常用简易JavaScript函数
Apr 09 #Javascript
javascript fullscreen全屏实现代码
Apr 09 #Javascript
jQuery 插件 将this下的div轮番显示
Apr 09 #Javascript
javascript RadioButtonList获取选中值
Apr 09 #Javascript
Cookie 注入是怎样产生的
Apr 08 #Javascript
You might like
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
javascript倒计时功能实现代码
2012/06/07 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
Python读写Redis数据库操作示例
2014/03/18 Python
Python单元测试框架unittest简明使用实例
2015/04/13 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
大学生毕业自我鉴定范文
2014/02/03 职场文书
班级活动策划书
2014/02/06 职场文书
超市理货员岗位职责
2014/07/04 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle