手機端實現fullPage——全屏滾動效果

時間 2019-11-17

標籤手機實現 fullpage 全屏滾動效果欄目 JavaScript 简体版

原文原文鏈接

封裝了一個小插件模擬fullPage的全屏滾動效果，比較簡單。javascript

特色：css

　　1. 純js實現，小巧輕便。html

　　2. 兼容性好。蘋果、安卓都沒問題，暫時沒遇到問題機型。vue

缺點：java

　　1. 僅封裝了基礎功能，HTML、css麼有去封裝。我的以爲不封裝更方便你們使用。react

接下來看看效果圖：vuex

相比效果你們都看到了，接下來看看代碼學習

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>移動端滾屏效果</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <style type="text/css">
            body,html{
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .g-fullPage{
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .g-fullPage div{
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 100%;
                transition: 0.5s ease-in;
            }
            .g-fullPage div:nth-child(1){
                background-color: #D5F1FD;
            }
            .g-fullPage div:nth-child(2){
                background-color: aquamarine;
            }
            .g-fullPage div:nth-child(3){
                background-color: mediumseagreen;
            }
        </style>
    </head>
    <body>
        <div class="g-fullPage">
            <div class="f-pageFirst">1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
    <script type="text/javascript">
        /*
             mainClass      滑動父容器類名
             firstClass  第一頁的類名
             num                  總頁數
        */
        function fullPage(mainClass, firstClass, num) {
            var startX = 0,                //初始橫座標
                    startY = 0,                //初始縱座標
                    marginTop = 0,        //上下滑動變量
                    touchNum = 0,            //上滑極限，是否能夠上滑
                    touchFlag = true, //可滑動標誌 true 可滑動，false 不可滑
                    bodyHeight = document.body.offsetHeight,
                    page = document.getElementsByClassName(mainClass)[0],
                    pageFirst = document.getElementsByClassName(firstClass)[0];
                
            //獲取觸摸的初識座標
            page.addEventListener("touchstart",function(e){
                 e.preventDefault();
                startX = e.targetTouches[0].clientX;
                startY = e.targetTouches[0].clientY;
            })
            //重置觸摸的座標值
            page.addEventListener("touchend",function(e){
                 e.preventDefault();
                startX = 0;
                startY = 0;
                touchFlag = true;
            })
            
            //監聽並實現 上、下 滑動效果
            page.addEventListener("touchmove",function(e){
                 e.preventDefault();
                var newX = e.targetTouches[0].clientX,
                        newY = e.targetTouches[0].clientY;
                if (newY - startY > 50) {
                    if (touchFlag == true && touchNum > 0) {
                        console.log("下滑");
                        touchFlag = false;
                        marginTop += 1;
                        touchNum -= 1;
                        pageFirst.style.marginTop = marginTop * bodyHeight+"px";
                    }
                } else if (newY - startY < -50) {
                    if (touchFlag == true && marginTop > -num+1) {
                        console.log("上滑");
                        touchFlag = false;
                        marginTop -= 1;
                        touchNum += 1;
                        pageFirst.style.marginTop = marginTop * bodyHeight+"px";
                    }
                }
            })
        }
        
        fullPage("g-fullPage", "f-pageFirst",3);
    </script>
</html>