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学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
设置cookie指定时间失效(实例代码)
May 28 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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对XML的操作详解
2013/06/07 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
Python封装shell命令实例分析
2015/05/05 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
如何用python整理附件
2018/05/13 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
python列表推导式操作解析
2019/11/26 Python
Python实现分数序列求和
2020/02/25 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
Python基于Faker假数据构造库
2020/11/30 Python
python FTP编程基础入门
2021/02/27 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
个人简历自荐信
2013/12/05 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
公司联欢会策划方案
2014/05/19 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书