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系列(12) 变量对象(Variable Object)
Jan 16 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
vue实现单选和多选功能
Aug 11 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
javascript如何实现create方法
Nov 04 Javascript
js模拟实现烟花特效
Mar 10 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
mysql+php分页类(已测)
2008/03/31 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
Smarty模板语法详解
2019/07/20 PHP
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
快速入门Vue
2016/12/19 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
vue项目实战总结篇
2018/02/11 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
Vue实现页面添加水印功能
2019/11/09 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Python原始字符串(raw strings)用法实例
2014/10/13 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
大学生家政服务项目创业计划书
2014/01/30 职场文书
运动会入场词60字
2014/02/15 职场文书
幼儿园老师寄语
2014/04/03 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题