js中的鼠标滚轮事件

##  事件对象 event
    1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标)
            window.onclick = function(ev){
                var oEvent = ev || event;//event为IE8和IE8以下浏览器浏览器事件对象可以直接使用;
                //以上代码可以判断是否传递了事件对象参数,如果传递了则使用传递的事件对象ev,否则使用window.event
                alert(oEvent.type);//click类型
            }
    2 事件对象的兼容写法
        a.IE8和IE8以下浏览器不能传递参数,只能使用window.event对象。
        b.谷歌浏览器既可以传递事件对象参数,也可以使用window.envent对象,十分全面。
        c.火狐浏览器只能使用传递的事件对象参数。
        因此针对不同浏览器,兼容性写法如下:
            事件.事件类型 = function(ev){//事件类型如鼠标点击事件
                var oEvent = ev || event;
            }
            

## 鼠标滚轮事件
    1 非火狐: mousewheel
        这里,event.wheelDelta < 0向下滚动
    2 火狐:DOMMouseScroll
        这里,event.detail > 0 为向下滚动,event.detail < 0 为向上滚动
    3.浏览器兼容性写法如下:
        document.onmousewheel = wheelHander;//非火狐
        document.addEventListener('DOMMouseScroll',wheelHander,false);//火狐
        
        function wheelHander(e){
            //事件的兼容性写法 
            oEvent = e || window.event;
            if(oEvent.wheelDelta){//非火狐
                if(oEvent.wheelDelta > 0){//向上滚动
                    
                }else{//向下滚动
                    
                }
            }else if(oEvent.detail){
                if(oEvent.detail > 0){//向下滚动
                    
                }else{//向上滚动
                    
                }
            }
        }
            
    3 案例:使用滚轮改变图片的大小
        
        var img = document.getElementsByTagName('img')[0];
        
        //非火狐实现滚轮效果
        document.onmousewheel = wheelHander;//非火狐
        //火狐一家使用DOMMouseScroll实现滚轮效果
        document.addEventListener('DOMMouseScroll',wheelHander,false);
        
        function wheelHander(e){
            oEvent = e || window.event;
            if(oEvent.wheelDelta){//非火狐
                if(oEvent.wheelDelta > 0){//向上滚动
                    img.height++;
                }else{//向下滚动
                    img.height--;
                }
            }else if(oEvent.detail){
                if(oEvent.detail > 0){//向下滚动
                    img.height--;
                }else{//向上滚动
                    img.height++;
                }
            }
        }
        

猜你喜欢

转载自www.cnblogs.com/menglong1214/p/9595009.html
今日推荐