鼠标滑轮滚动实现换页

windowAddMouseWheel();  
function windowAddMouseWheel() {  
    var i = 0;
    var j = 0;
    var scrollFunc = function (e) {  
        e = e || window.event;  
        j = j+e.wheelDelta;
        /*对位置进行缩小,在超出页面范围时,手动设置一个范围,避免长时间滑动没有效果*/
        if(j > 0){
            j = 5;
        }else if(j < -6554){
            j = -6500;
        }
            panduan(e,j);//调用判断方法,进行页面的定位
    };  
    
    //给页面绑定滑轮滚动事件  
    if (document.addEventListener) {  
        document.addEventListener('DOMMouseScroll', scrollFunc, false);  
    }  
//滚动滑轮触发scrollFunc方法  
    window.onmousewheel = document.onmousewheel = scrollFunc;  
} 
function panduan(e,j){
    if (e.wheelDelta) {  //判断浏览器IE,谷歌滑轮事件     
        if (e.wheelDelta > 0) { //当滑轮向上滚动时  
//            alert("滑轮向上滚动i"+j);  
        }  
        // if (e.wheelDelta < 0) { //当滑轮向下滚动时  
//                alert("滑轮向下滚动"+(-e.wheelDelta));     
//            }  
        if(j <= 0){
            if (j <= 0 && j > -922) { //当滑轮向下滚动时  
                $("#show").html($("#one_one").html());//第一个页面
            }else if(j < -922 && j >= -1844){
                $("#show").html($("#two_two").html());//进行页面内容的替换,第二个页面
            }else if(j < -1844 && j >= -2766){
                $("#show").html($("#three_three").html());//第三个页面
            }else if(j < -2766 && j >= -3688){
                $("#show").html($("#four_four").html());//第四个页面
            }else if(j < -3688 && j >= -4610){
                $("#show").html($("#five_five_five").html());//第五个页面
            }else if(j < -4610 && j >= -5532){
                $("#show").html($("#six_six").html());//第六个页面
            }else if(j < -5532 && j >= -6454){
                $("#show").html($("#seven_seven").html());//第七个页面
            }else{
                $("#show").html($("#eight_eight").html());//第八个页面
            }
        }
        
    } else if (e.detail) {  //Firefox滑轮事件  
        if (e.detail> 0) { //当滑轮向上滚动时  
                i++;
                window.scrollTo(0,300*i);
                //alert("滑轮向上滚动"+i);  
        }  
        if (e.detail< 0) { //当滑轮向下滚动时  
            i--;
            window.scrollTo(0,922*i);
                //alert("滑轮向下滚动"+i);  
        }  
   }  
}        

 

posted @ 2018-03-13 16:27  杨不凡  阅读(311)  评论(0编辑  收藏  举报