【實例】原生 js 實現全屏滾動效果

其他，插件：http://www.dowebok.com/77.html

 

 

原理： 1. 計算當前瀏覽器屏幕高度，每次翻頁顯示的內容高度即為屏幕高度

             2. 對鼠標滾輪事件進行監聽，注意滾輪事件的瀏覽器兼容問題。

廢話不多說，直接上代碼

html代碼：

 

 

    <span style="font-size:18px;"><span style="font-size:14px;"><div id="wrap">  
        <div id="main" style="top: 0;">  
            <div class="content num1">  
                <img src="https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg" width="100%" height="100%">  
            </div>  
            <div class="content num2">  
                <img src="https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg" width="100%" height="100%">  
            </div>  
            <div class="content num3">  
                <img src="https://www.bing.com/az/hprichbg/rb/GareSaintLazare_ZH-CN6611772290_1920x1080.jpg" width="100%" height="100%">  
            </div>  
            <div class="content num4">  
                <img src="https://www.bing.com/az/hprichbg/rb/FriendshipSquare_ZH-CN8820626148_1920x1080.jpg" width="100%" height="100%">  
            </div>  
        </div>  
    </div></span></span>  

 

 

 

 css代碼：

 

    <span style="font-size:14px;">#wrap{overflow: hidden;width: 100%;}  
    #main{top: 0;position: relative;}  
    .content{width: 100%;margin: 0;height: 100%;}  
    .num1{background: #e8e8e8;}  
    .num2{background: pink;}  
    .num3{background: yellow;}  
    .num4{background: orange;}</span>  

 

 

 

 

js代碼：

 

    <span style="font-size:14px;"><script type="text/javascript">  
        var wrap = document.getElementById("wrap");  
          
        var divHeight = window.innerHeight;  
          
        wrap.style.height = divHeight + "px";  
      
        var content = $(".content");//懶得寫獲取類的原生js代碼了，直接用了jquery，=。=  
      
        content.height(divHeight);  
      
        var startTime = 0, //開始翻屏時間  
            endTime = 0,  
            now = 0;     
      
        if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){  
            //for firefox;  
            document.addEventListener("DOMMouseScroll",scrollFun,false);  
          
        }  
        else if (document.addEventListener) {  
          
            document.addEventListener("mousewheel",scrollFun,false);  
          
        }  
        else if (document.attachEvent) {  
          
            document.attachEvent("onmousewheel",scrollFun);  
          
        }  
        else{  
          
            document.onmousewheel = scrollFun;  
          
        }  
      
        //滾動事件處理函數  
        function scrollFun(event){  
      
                startTime = new Date().getTime();  
      
                var delta = event.detail || (-event.wheelDelta);  
      
                if ((endTime - startTime) < -1000) {  
                    //1秒內執行一次翻頁  
      
                    if (delta > 0 && parseInt(main.style.top) > -divHeight * ( content.length - 1)) { //向下翻頁  
      
                        now += divHeight ;  
      
                        turnPage(now);  
      
                    }   
      
                    if (delta < 0 && parseInt(main.style.top) < 0) { //向上翻頁  
      
                        now -= divHeight ;  
      
                        turnPage(now);  
      
                    }  
      
                    endTime = new Date().getTime();  
      
                }  
                else{  
      
                    event.preventDefault();  
      
                }  
                  
        }  
      
        //翻頁函數  
        function turnPage(now){  
              
            $("#main").animate({top:(-now+'px')},1000);  
      
            //懶得寫動畫代碼了，直接用了jquery</span><span style="font-size:14px;">，=。=  
        }  
    </script></span>