js的鼠标滚轮事件
2016-11-15 09:42
204 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{width: 200px;height: 200px;background-color: red;position: absolute;} </style> <script type="text/javascript"> window.onload=function(){ var oBox=document.getElementById('box');//找到对应的盒子 oBox.onmousewheel=fn;//onmousewheel兼容IE和谷歌,不兼容火狐 if(oBox.addEventListener){//addEventListenner绑定事件,兼容非IE,attachEvent兼容IE oBox.addEventListener('DOMMouseScroll',fn,false);//DOMMouseScroll兼容火狐 } var b=true; function fn(ev){ var iEvent=ev||event; if(iEvent.wheelDelta){//鼠标上滚和下滚事件,wheelDelta兼容IE和谷歌不兼容火狐,上滚为120,下滚为-120 b=iEvent.wheelDelta>0?b=true:b=false; } else{ b=iEvent.detail>0?b=false:b=true;//detail兼容火狐,上滚为-3,下滚为3 } if(b){ oBox.style.height=oBox.offsetHeight+10+'px'; } else{ oBox.style.height=oBox.offsetHeight-10+'px'; } } } </script> </head> <body> <div id="box"> </div> </body> </html>
相关文章推荐
- 2.0Tip/Trick之Silverlight.js, Silverlight.supportedUserAgent.js, 自定义启动界面, 响应鼠标滚轮事件
- js中鼠标滚轮事件详解
- JS禁用鼠标滚轮事件
- JS鼠标滚轮事件详解
- js响应鼠标滚轮事件
- js中鼠标滚轮事件详解
- js中鼠标滚轮事件详解
- js鼠标滚轮事件详解(全兼容ie、chrome、firefox)实现图片缩放
- JS事件-鼠标滚轮事件
- 【js学习笔记-095】----鼠标滚轮事件
- js 事件对象 鼠标滚轮效果演示说明
- js中鼠标滚轮事件详解
- js中的鼠标滚轮事件
- js鼠标滚轮上下滚动监听事件应用实例(跨浏览器,亲测)
- 稳扎稳打Silverlight(30) - 2.0Tip/Trick之Silverlight.js, Silverlight.supportedUserAgent.js, 自定义启动界面, 响应鼠标滚轮事件
- js中鼠标滚轮事件详解
- js 事件对象 鼠标滚轮效果演示说明
- 【Js】鼠标滚轮事件
- js捕获鼠标滚轮事件代码
- js鼠标滚轮上下滚动监听事件应用实例(跨浏览器,亲测)