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 相关文章推荐
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 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地址引用(php地址引用的效率问题)
2012/03/23 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
php生成微信红包数组的方法
2019/09/05 PHP
js字符编码函数区别分析
2008/06/05 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
Python简单读取json文件功能示例
2017/11/30 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
Python3分析处理声音数据的例子
2019/08/27 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
个人优缺点自我评价
2014/01/27 职场文书
建议书怎么写
2014/03/12 职场文书
相亲活动方案
2014/08/26 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
2014全年工作总结
2014/11/27 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python