js捕获鼠标滚动事件
2015-06-09 18:07
666 查看
js如何判断滚轮的上下滚动，我们应该都见到过这种效果，用鼠标滚轮实现某个表单内的数字向上滚动就增加，向下滚动就减少的操作，这种效果是通过js对鼠标滚轮的事件监听来实现的,因为不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），关于这两个事件这里不做详述，想要了解的朋友请移步：鼠标滚轮(mousewheel)和DOMMouseScroll事件，所以在这个过程中需要添加事件监听，代码如下：兼容firefox采用addEventListener监听。
下面是我写的一个简单的类似跑马灯的效果，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Cotnent-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
</head>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<style>
.outerLayer{
height: 260px;
width: 260px;
border: 2px solid black;
top: 10%;
left: 40%;
position: absolute;
}
.topDiv{
height: 52px;
width: 208px;
position: absolute;
}
.topDiv_in{
height: 50px;
width:50px;
border: 1px solid black;
float: left;
text-align: center;
line-height: 50px;
}
.leftDiv{
width: 50px;
height: 207px;
position: absolute;
top: 52px;
}
.leftDiv_in{
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
line-height: 50px;
}
.bottomDiv{
width: 210px;
height: 52px;
position: absolute;
left: 52px;
top: 207px;
}
.bottomDiv_in{
width: 50px;
height: 51px;
border: 1px solid black;
float: left;
text-align: center;
line-height: 50px;
}
.rightDiv{
width: 53px;
height: 207px;
position: absolute;
left: 207px;
}
.rightDiv_in{
width: 50px;
height: 50px;
border: 1px solid black;
float: right;
text-align: center;
line-height: 50px;
}
.middleDiv{
width: 154px;
height: 154px;
position: absolute;
border: 1px solid black;
left: 52px;
top: 52px;
text-align: center;
line-height: 154px;
font-weight: bold;
font-size: 36px;
}
</style>
<body>
<div class="outerLayer">
<div class="topDiv">
<div class="topDiv_in" id="div1">1</div>
<div class="topDiv_in" id="div16">16</div>
<div class="topDiv_in" id="div15">15</div>
<div class="topDiv_in" id="div14">14</div>
</div>
<div class="leftDiv">
<div class="leftDiv_in" id="div2">2</div>
<div class="leftDiv_in" id="div3">3</div>
<div class="leftDiv_in" id="div4">4</div>
<div class="leftDiv_in" id="div5">5</div>
</div>
<div class="bottomDiv">
<div class="bottomDiv_in" id="div6">6</div>
<div class="bottomDiv_in" id="div7">7</div>
<div class="bottomDiv_in" id="div8">8</div>
<div class="bottomDiv_in" id="div9">9</div>
</div>
<div class="rightDiv">
<div class="rightDiv_in" id="div13">13</div>
<div class="rightDiv_in" id="div12">12</div>
<div class="rightDiv_in" id="div11">11</div>
<div class="rightDiv_in" id="div10">10</div>
</div>
<div class="middleDiv" id="middleContext"></div>
</div>
<script>
$(document).ready(function(){
var index = 1;
var scrollFunc = function scrollFunc(e){
e = e || window.event;
if(e.wheelDelta){//IE/Opera/Chrome
if(e.wheelDelta<0){//向下滚动
$("div[id^=div]").removeAttr("style data-id");
if(index<16){
index++;
}else{
index = 1;
}
if(index==3){
$("#div3").attr("style","background-color: blue;").attr("data-id","1");
$("#div2").attr("style","background-color: yellow;").attr("data-id","2");
$("#div1").attr("style","background-color: red;").attr("data-id","3");
$("#div16").attr("style","background-color: green;").attr("data-id","4");
}else if(index==2){
$("#div2").attr("style","background-color: blue;").attr("data-id","1");
$("#div1").attr("style","background-color: yellow;").attr("data-id","2");
$("#div16").attr("style","background-color: red;").attr("data-id","3");
$("#div15").attr("style","background-color: green;").attr("data-id","4");
}else if(index==1){
$("#div1").attr("style","background-color: blue;").attr("data-id","1");
$("#div16").attr("style","background-color: yellow;").attr("data-id","2");
$("#div15").attr("style","background-color: red;").attr("data-id","3");
$("#div14").attr("style","background-color: green;").attr("data-id","4");
}else if(index>=4){
$("#div"+index).attr("style","background-color: blue;").attr("data-id","1");
$("#div"+(index-1)).attr("style","background-color: yellow;").attr("data-id","2");
$("#div"+(index-2)).attr("style","background-color: red;").attr("data-id","3");
$("#div"+(index-3)).attr("style","background-color: green;").attr("data-id","4");
}
var temp = $("#div3").attr("data-id");
if(temp==1){
$("#middleContext").html("蓝色");
}else if(temp==2){
$("#middleContext").html("黄色");
}else if(temp==3){
$("#middleContext").html("红色");
}else if(temp==4){
$("#middleContext").html("绿色");
}else{
$("#middleContext").html("无");
}
}else{//向上滚动
//这里的代码我没有写,如果需要，可以自己仿照上面的写出来，只是要注意颜色的顺序别乱了就行
}
}else if(e.detail){//Firefox
if(e.detail>0){//向下滚动
$("div[id^=div]").removeAttr("style data-id");
if(index<16){
index++;
}else{
index = 1;
}
if(index==3){
$("#div3").attr("style","background-color: blue;").attr("data-id","1");
$("#div2").attr("style","background-color: yellow;").attr("data-id","2");
$("#div1").attr("style","background-color: red;").attr("data-id","3");
$("#div16").attr("style","background-color: green;").attr("data-id","4");
}else if(index==2){
$("#div2").attr("style","background-color: blue;").attr("data-id","1");
$("#div1").attr("style","background-color: yellow;").attr("data-id","2");
$("#div16").attr("style","background-color: red;").attr("data-id","3");
$("#div15").attr("style","background-color: green;").attr("data-id","4");
}else if(index==1){
$("#div1").attr("style","background-color: blue;").attr("data-id","1");
$("#div16").attr("style","background-color: yellow;").attr("data-id","2");
$("#div15").attr("style","background-color: red;").attr("data-id","3");
$("#div14").attr("style","background-color: green;").attr("data-id","4");
}else if(index>=4){
$("#div"+index).attr("style","background-color: blue;").attr("data-id","1");
$("#div"+(index-1)).attr("style","background-color: yellow;").attr("data-id","2");
$("#div"+(index-2)).attr("style","background-color: red;").attr("data-id","3");
$("#div"+(index-3)).attr("style","background-color: green;").attr("data-id","4");
}
var temp = $("#div3").attr("data-id");
if(temp==1){
$("#middleContext").html("蓝色");
}else if(temp==2){
$("#middleContext").html("黄色");
}else if(temp==3){
$("#middleContext").html("红色");
}else if(temp==4){
$("#middleContext").html("绿色");
}else{
$("#middleContext").html("无");
}
}else{//向上滚动
//这里的代码我没有写,如果需要，可以自己仿照上面的写出来，只是要注意颜色的顺序别乱了就行
}
}
}
//fireFox
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
//IE/Opera/Chrome
window.onmousewheel = document.onmousewheel = scrollFunc;
});
</script>
</body>
</html>
判断滚轮向上或向下滚动在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox
使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义却是一致的，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。
在非firefox浏览器中，滚轮向上滚动返回的数值是120，向下滚动返回-120
而在firefox浏览器中，滚轮向上滚动返回的数值是-3，向下滚动返回3
下面是我写的一个简单的类似跑马灯的效果，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Cotnent-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
</head>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<style>
.outerLayer{
height: 260px;
width: 260px;
border: 2px solid black;
top: 10%;
left: 40%;
position: absolute;
}
.topDiv{
height: 52px;
width: 208px;
position: absolute;
}
.topDiv_in{
height: 50px;
width:50px;
border: 1px solid black;
float: left;
text-align: center;
line-height: 50px;
}
.leftDiv{
width: 50px;
height: 207px;
position: absolute;
top: 52px;
}
.leftDiv_in{
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
line-height: 50px;
}
.bottomDiv{
width: 210px;
height: 52px;
position: absolute;
left: 52px;
top: 207px;
}
.bottomDiv_in{
width: 50px;
height: 51px;
border: 1px solid black;
float: left;
text-align: center;
line-height: 50px;
}
.rightDiv{
width: 53px;
height: 207px;
position: absolute;
left: 207px;
}
.rightDiv_in{
width: 50px;
height: 50px;
border: 1px solid black;
float: right;
text-align: center;
line-height: 50px;
}
.middleDiv{
width: 154px;
height: 154px;
position: absolute;
border: 1px solid black;
left: 52px;
top: 52px;
text-align: center;
line-height: 154px;
font-weight: bold;
font-size: 36px;
}
</style>
<body>
<div class="outerLayer">
<div class="topDiv">
<div class="topDiv_in" id="div1">1</div>
<div class="topDiv_in" id="div16">16</div>
<div class="topDiv_in" id="div15">15</div>
<div class="topDiv_in" id="div14">14</div>
</div>
<div class="leftDiv">
<div class="leftDiv_in" id="div2">2</div>
<div class="leftDiv_in" id="div3">3</div>
<div class="leftDiv_in" id="div4">4</div>
<div class="leftDiv_in" id="div5">5</div>
</div>
<div class="bottomDiv">
<div class="bottomDiv_in" id="div6">6</div>
<div class="bottomDiv_in" id="div7">7</div>
<div class="bottomDiv_in" id="div8">8</div>
<div class="bottomDiv_in" id="div9">9</div>
</div>
<div class="rightDiv">
<div class="rightDiv_in" id="div13">13</div>
<div class="rightDiv_in" id="div12">12</div>
<div class="rightDiv_in" id="div11">11</div>
<div class="rightDiv_in" id="div10">10</div>
</div>
<div class="middleDiv" id="middleContext"></div>
</div>
<script>
$(document).ready(function(){
var index = 1;
var scrollFunc = function scrollFunc(e){
e = e || window.event;
if(e.wheelDelta){//IE/Opera/Chrome
if(e.wheelDelta<0){//向下滚动
$("div[id^=div]").removeAttr("style data-id");
if(index<16){
index++;
}else{
index = 1;
}
if(index==3){
$("#div3").attr("style","background-color: blue;").attr("data-id","1");
$("#div2").attr("style","background-color: yellow;").attr("data-id","2");
$("#div1").attr("style","background-color: red;").attr("data-id","3");
$("#div16").attr("style","background-color: green;").attr("data-id","4");
}else if(index==2){
$("#div2").attr("style","background-color: blue;").attr("data-id","1");
$("#div1").attr("style","background-color: yellow;").attr("data-id","2");
$("#div16").attr("style","background-color: red;").attr("data-id","3");
$("#div15").attr("style","background-color: green;").attr("data-id","4");
}else if(index==1){
$("#div1").attr("style","background-color: blue;").attr("data-id","1");
$("#div16").attr("style","background-color: yellow;").attr("data-id","2");
$("#div15").attr("style","background-color: red;").attr("data-id","3");
$("#div14").attr("style","background-color: green;").attr("data-id","4");
}else if(index>=4){
$("#div"+index).attr("style","background-color: blue;").attr("data-id","1");
$("#div"+(index-1)).attr("style","background-color: yellow;").attr("data-id","2");
$("#div"+(index-2)).attr("style","background-color: red;").attr("data-id","3");
$("#div"+(index-3)).attr("style","background-color: green;").attr("data-id","4");
}
var temp = $("#div3").attr("data-id");
if(temp==1){
$("#middleContext").html("蓝色");
}else if(temp==2){
$("#middleContext").html("黄色");
}else if(temp==3){
$("#middleContext").html("红色");
}else if(temp==4){
$("#middleContext").html("绿色");
}else{
$("#middleContext").html("无");
}
}else{//向上滚动
//这里的代码我没有写,如果需要，可以自己仿照上面的写出来，只是要注意颜色的顺序别乱了就行
}
}else if(e.detail){//Firefox
if(e.detail>0){//向下滚动
$("div[id^=div]").removeAttr("style data-id");
if(index<16){
index++;
}else{
index = 1;
}
if(index==3){
$("#div3").attr("style","background-color: blue;").attr("data-id","1");
$("#div2").attr("style","background-color: yellow;").attr("data-id","2");
$("#div1").attr("style","background-color: red;").attr("data-id","3");
$("#div16").attr("style","background-color: green;").attr("data-id","4");
}else if(index==2){
$("#div2").attr("style","background-color: blue;").attr("data-id","1");
$("#div1").attr("style","background-color: yellow;").attr("data-id","2");
$("#div16").attr("style","background-color: red;").attr("data-id","3");
$("#div15").attr("style","background-color: green;").attr("data-id","4");
}else if(index==1){
$("#div1").attr("style","background-color: blue;").attr("data-id","1");
$("#div16").attr("style","background-color: yellow;").attr("data-id","2");
$("#div15").attr("style","background-color: red;").attr("data-id","3");
$("#div14").attr("style","background-color: green;").attr("data-id","4");
}else if(index>=4){
$("#div"+index).attr("style","background-color: blue;").attr("data-id","1");
$("#div"+(index-1)).attr("style","background-color: yellow;").attr("data-id","2");
$("#div"+(index-2)).attr("style","background-color: red;").attr("data-id","3");
$("#div"+(index-3)).attr("style","background-color: green;").attr("data-id","4");
}
var temp = $("#div3").attr("data-id");
if(temp==1){
$("#middleContext").html("蓝色");
}else if(temp==2){
$("#middleContext").html("黄色");
}else if(temp==3){
$("#middleContext").html("红色");
}else if(temp==4){
$("#middleContext").html("绿色");
}else{
$("#middleContext").html("无");
}
}else{//向上滚动
//这里的代码我没有写,如果需要，可以自己仿照上面的写出来，只是要注意颜色的顺序别乱了就行
}
}
}
//fireFox
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
//IE/Opera/Chrome
window.onmousewheel = document.onmousewheel = scrollFunc;
});
</script>
</body>
</html>
判断滚轮向上或向下滚动在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox
使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义却是一致的，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。
在非firefox浏览器中，滚轮向上滚动返回的数值是120，向下滚动返回-120
而在firefox浏览器中，滚轮向上滚动返回的数值是-3，向下滚动返回3
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- 微软无线镭射简报鲨8000激光笔记本鼠标 - (2)
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 通过Mootools 1.2来操纵HTML DOM元素
- WEB标准网页布局中尽量不要使用的HTML标签
- 鼠标与“助手”的不解之缘
- js可突破windows弹退效果代码
- Flash 与 html 的一些实用技巧
- Delphi实现窗体感知鼠标滑过并自动隐藏与显示窗口的方法
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- JSP脚本漏洞面面观
- C#自写的一个HTML解析类（类似XElement语法）
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 没有文件大小限制并免费的PDF到HTML转换工具
- css实现气泡框效果(实例加图解)