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 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
Javascript中的 “&” 和 “|” 详解
Feb 02 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
vue实现底部菜单功能
Jul 24 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 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
JavaScript中实现块作用域的方法
2010/04/01 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
2013/04/23 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python中内建函数的简单用法说明
2016/05/05 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
代码分析Python地图坐标转换
2018/02/08 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
使用python去除图片白色像素的实例
2019/12/12 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年大学生工作总结
2015/04/21 职场文书
三下乡活动心得体会
2016/01/23 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书