这段时间的都是讲事件的，所以今天再来讲一个鼠标滚轮的事件。
要实现的功能是：
* 当鼠标滚轮向下滚动时，box1变长
* 当鼠标滚轮向上滚动时，box1变短
废话少说，代码奉上：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background: red; } </style> <script type="text/javascript"> window.onload = function(){ box1 = document.getElementById("box1"); //绑定滚轮事件 /* * onmousewheel鼠标滚轮滚动事件，会在滚轮滚动时触发，但是火狐不兼容 * 在火狐中需要使用DOMMouseScroll来绑定滚轮事件 * 注意该事件需要addEventLister（）来绑定 * */ box1.onmousewheel = function(event){ alert("滚了") /* * 当鼠标滚轮向下滚动时，box1变长 * 当鼠标滚轮向上滚动时，box1变短 * 判断鼠标滚轮滚动的方向 * event.wheelDelta 可以获取鼠标滚轮滚动的方向 * 向上滚120，向下滚-120 * wheelDelta火狐不支持，所以使用 * event.detail来获取滚动的方向 * 向上滚-3，向下滚3 */ event = event || window.event; if(event.wheelDelta>0 || event.detail<0){ box1.style.height = event.clientHeight - 10 +"px" }else{ box1.style.height = event.clientHeight + 10 +"px" } /* * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动， * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为。使用return false * 但是addEventListener（）方法绑定响应函数，取消默认行为不能使用return false，需要使用event来取消默认行为 * event.preventDefault();但是IE8不支持，不能直接调用。 */ if(event.preventDefault){ event.preventDefault() } return false; } //为火狐绑定滚轮事件 bind(box1,'DOMMouseScroll',box1.onmousewheel) function bind(obj,eventstr,callback){ if (obj.addEventListener){ obj.addEventListener(eventstr,callback,false) }else{ obj.attachEvent('on'+eventstr,function(){ callback.call(obj); }) } } } </script> </head> <body> <div id="box1"></div> </body> </html>