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 相关文章推荐
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 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
Protoss热键控制
2020/03/14 星际争霸
php auth_http类库进行身份效验
2009/03/19 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
在Python下尝试多线程编程
2015/04/28 Python
python读取文本中的坐标方法
2018/10/14 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
Python设计密码强度校验程序
2020/07/30 Python
浅谈python 类方法/静态方法
2020/09/18 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
Intersport西班牙:在线体育商店
2019/11/06 全球购物
Python的两道面试题
2013/06/29 面试题
护士长竞聘书
2014/03/31 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
2014年部门工作总结
2014/11/12 职场文书
云台山导游词
2015/02/03 职场文书
会议营销主持词
2015/07/03 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL