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 相关文章推荐
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
梳理一下vue中的生命周期
Dec 30 Vue.js
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
mysql 搜索之简单应用
2007/04/27 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP中常用的转义函数
2014/02/28 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
Javascript复制实例详解
2016/01/28 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
python if not in 多条件判断代码
2016/09/21 Python
tensorflow识别自己手写数字
2018/03/14 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
python自定义函数def的应用详解
2020/06/03 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
党支部公开承诺践诺书
2014/03/28 职场文书
国际会计专业求职信
2014/08/04 职场文书
解除劳动合同协议书
2014/09/17 职场文书
教师节座谈会主持词
2015/07/03 职场文书
2015国庆节感想
2015/08/04 职场文书
护理心得体会范文
2016/01/22 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书