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 相关文章推荐
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 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 Class&Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
学习ExtJS table布局
2009/10/08 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
Vue DevTools调试工具的使用
2017/12/05 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python出现"IndentationError: unexpected indent"错误解决办法
2017/10/15 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
工会主席岗位责任制
2014/02/11 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
个人催款函范文
2015/06/24 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL