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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
javascript继承机制实例详解
Nov 20 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
javascript事件处理模型实例说明
May 31 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
jQuery文字轮播特效
Feb 12 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 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写的简易聊天室代码
2011/06/04 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
英国最大的海报商店:GB Posters
2018/03/20 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
活动策划邀请函
2014/02/06 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
新闻稿标题
2015/07/18 职场文书
奠基仪式致辞
2015/07/30 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
Python MNIST手写体识别详解与试练
2021/11/07 Python
vue实力踩坑之push当前页无效
2022/04/10 Vue.js