js 捕捉滚轮的滚动
滚动方向区分为正负：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//去掉默认的contextmenu事件，否则会和右键事件同时出现。
document.oncontextmenu = function(e){
e.preventDefault();
};
document.getElementById("test").onmousedown = function(e){
if(e.button ==2){
alert("你点了右键");
}else if(e.button ==0){
alert("你点了左键");
}else if(e.button ==1){
alert("你点了滚轮");
}
}
}
</script>
</head>
<body>
<label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
<label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/>
<script type="text/javascript">
var scrollFunc=function(e){
ee=e || window.event;
var t1=document.getElementById("wheelDelta");
var t2=document.getElementById("detail");
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
t2.value=e.detail;
}
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script>
<div style="width: 400px;height:400px;margin:auto;border:1px solid pink" id="test"></div>
</body>
</html>
js 捕捉滚轮的滚动的更多相关文章
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- JS鼠标滚轮事件解析
一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...
- Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
- js点击左右滚动+默认自动滚动类
js点击左右滚动+默认自动滚动类 点击下载
- js 实现单行文本滚动效果
js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...
- js 实现文字列表滚动效果
今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...
- js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法
js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...
- js标题文字向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
随机推荐
- minus查找两张表的不同项
minus关键字的使用: select * from A minus select * from B; 上面的SQL语句返回的是表A中存在,表B中不存在的数据: 注意:1.区分不同的规则是查询的所有字 ...
- 松下 激光位移传感器 API
一: /* ============================================================================================== ...
- Python: Flask框架简单介绍
接触Python之后我第一次听说Flask,我就根据自己搜罗的知识尽可能简洁的说出来.如果不准确的地方还请指正,谢谢. Flask是什么? Flask是基于Python编写的微 ...
- eclipse启动 报错，错误信息为 return exit code=13
打不开的报错如下图: 解决方法:手工配置Eclipse使用的JDK,在Eclipse的安装目录中找到eclipse.ini文件,增加正确的JDK安装目录,如图 在plugins/ 下一行,增加 -vm ...
- Azkaban－开源任务调度程序（安装篇）
最近项目迁移到新集群,试试同事推荐的开源任务调度程序-azkaban(阿兹卡班),没看错,就是哈利波特里的阿兹卡班,azikaban主要用来解决hadoop依赖任务的执行,但是它本身支持linux和j ...
- python 运行脚本报错 from keyword import iskeyword as _iskeyword ImportError: cannot import name iskeyword，说明python环境坏了，得重装，尚不知具体原因，
C:\Python27\Scripts>python task_test.pyTraceback (most recent call last): File "task_test.p ...
- C++ Word Count 发布程序
前段时间,模仿 Linux 系统下的 wc 程序,在 Windows 系统环境下使用 C/C++ 实现了一个相似的 WC 程序,只不过有针对性,针对的是 C/C++,Java 等风格的源代码文件. 此 ...
- tomcat和jetty区别
参见:https://www.cnblogs.com/fengli9998/p/7247559.html 1. Jetty更轻量级.这是相对Tomcat而言的. 由于Tomcat除了遵循Java Se ...
- Linux基础命令---dump
dump 检查ext2/3/4文件系统,确定哪些文件需要备份,这些需要备份的文件将会被复制到指定的磁盘或者其他存储介质.dump检查Ext 2/3/4文件系统上的文件,并确定哪些文件需要备份.这些文件 ...
- 负载均衡之-LVS
负载均衡用的很多,这里对负载均衡做一个总结吧,总共包含下面几片博文. LVS负载均衡 keepalived负载均衡+高可用 haproxy负载均衡 nginx负载均衡 LVS负载均衡 LVS是章文嵩博 ...