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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
判断iframe是否加载完成的完美方法
Jan 07 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
JS字符串处理实例代码
Aug 05 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
Prototype框架详解
Nov 25 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
js实现无限瀑布流实例方法
Sep 16 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模块memcache和memcached区别分析
2011/06/14 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
深入理解PHP内核(一)
2015/11/10 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
js下用层来实现select的title提示属性
2010/02/23 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
Python重新引入被覆盖的自带function
2014/07/16 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
python新手学习可变和不可变对象
2020/06/11 Python
详解Python 中的容器 collections
2020/08/17 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
群众路线学习心得体会范文
2014/11/05 职场文书
党支部考察意见范文
2015/06/02 职场文书