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 相关文章推荐
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
基于jquery编写分页插件
Mar 07 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
js随机生成一个验证码
Jun 01 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
Angular之toDoList的实现代码示例
Dec 02 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中的登陆login
2007/01/18 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
python 文件转成16进制数组的实例
2018/07/09 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Python进度条的制作代码实例
2019/08/31 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
药剂专业自荐书
2014/06/20 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
感谢师恩主题班会
2015/08/17 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript
Tomcat用户管理的优化配置详解
2022/03/31 Servers