鼠标滚轮的事件

这段时间的都是讲事件的，所以今天再来讲一个鼠标滚轮的事件。

要实现的功能是：

* 当鼠标滚轮向下滚动时，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>

 

posted @ 2018-07-18 17:14  你若精彩，蝴蝶自来  阅读(226)  评论(0)  编辑  收藏  举报