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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
javascript 数组学习资料收集
Apr 11 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
jquery常用操作小结
Jul 21 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 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实现文件下载断点续传详解
2014/10/15 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
如何编写jquery插件
2017/03/29 jQuery
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
python的类方法和静态方法
2014/12/13 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python 实现绘制整齐的表格
2019/11/18 Python
python实现简单学生信息管理系统
2020/04/09 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
大学校园毕业自我鉴定
2014/01/15 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
消防安全责任书
2014/04/14 职场文书
电气自动化求职信
2014/06/24 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
解析MySQL binlog
2021/06/11 MySQL
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript