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语言中的Literal Syntax特性分析
Mar 08 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 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之CodeIgniter学习笔记
2013/06/17 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Python request使用方法及问题总结
2020/04/26 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
岗位职责的定义
2013/11/10 职场文书
《老王》教学反思
2014/02/23 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
高中生毕业评语
2014/12/30 职场文书
MySQL数据库之存储过程 procedure
2022/06/16 MySQL