六一廣告頁H5全屏滾動效果實現

時間 2019-12-09

標籤六一廣告 h5 全屏滾動效果實現简体版

原文原文鏈接

明天就六一兒童了（放假了），在這裏提早祝你們週末快樂，每逢節假日公司必然會推出h5活動頁的需求，此次六一兒童節也不例外，產品此次卻是沒提什麼互動效果需求，只不過根據UI妹子給的設計圖，圖片與圖片中顏色區分過於明顯，因此本身感受仍是作全屏滾動效果比較好看，所以在這裏作個總結......javascript

方法一：css

效果圖展現（動態圖用的是LICEcap軟件）：html

全局代碼展現：java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
        <meta name="format-detection" content="telephone=no" />
        <meta content="yes" name="mobile-web-app-capable">
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <title>移動端h5活動整頁滑屏</title>
        <style type="text/css">
            *{padding:0;margin:0}
            body,html{height:100%;background-color:#fff}
           .wrap{width:100%;height:100%;overflow:hidden}
           .wrap2{width:100%;height:1000%;transition:.3s linear}
           .page{width:100%;height:10%;}
        </style>
    </head>
    <body>
        <div class="wrap" id="wrap">
            <div class="wrap2" id="wrap2">
                <img class="page" src="img/six01.png"/>
                <img class="page" src="img/six02.png"/>
                <img class="page" src="img/six03.png"/>
                <img class="page" src="img/six04.png"/>
                <img class="page" src="img/six05.png"/>
                <img class="page" src="img/six06.png"/>
                <img class="page" src="img/six07.png"/>
                <div class="img-eight page">
                    這一塊是input框，爲了簡化代碼，易於理解去掉了
                </div>
            </div>
        </div>
        <script type="text/javascript">
            //重要！禁止移動端滑動的默認事件（這一塊是移動端下拉的時候會觸發到刷新事件，滑動圖片會上不去）
            document.body.addEventListener('touchmove', function(event) {
                event = event ? event : window.event;
                if(event.preventDefault) {
                    event.preventDefault()
                } else {
                    event.returnValue = false
                }
            }, false)
            var pages = function(obj) {
                var box = document.getElementById(obj.wrap);
                var box2 = document.getElementById(obj.wrap2);
                var len = obj.len;
                var n = obj.n;
                var startY, moveY, cliH;
                //獲取屏幕高度
                var getH = function() {
                    cliH = document.body.clientHeight
                };
                getH();
                window.addEventListener('resize', getH, false);
                //touchStart
                var touchstart = function(event) {
                    if(!event.touches.length) {
                        return;
                    }
                    startY = event.touches[0].pageY;
                    moveY = 0;
                };
                //touchMove
                var touchmove = function(event) {
                    if(!event.touches.length) {
                        return;
                    }
                    moveY = event.touches[0].pageY - startY;
                    box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根據手指的位置移動頁面
                };
                //touchEnd
                var touchend = function(event) {
                    //位移小於+-50的不翻頁
                    if(moveY < -50) n++;
                    if(moveY > 50) n--;
                    //最後&最前頁控制
                    if(n < 0) n = 0;
                    if(n > len - 1) n = len - 1;
                    //重定位
                    box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根據百分比位置移動頁面
                    console.log(n)
                };
                //touch事件綁定
                box.addEventListener("touchstart", function(event) {
                    touchstart(event)
                }, false);
                box.addEventListener("touchmove", function(event) {
                    touchmove(event)
                }, false);
                box.addEventListener("touchend", function(event) {
                    touchend(event)
                }, false);
            };
            pages({
                wrap: 'wrap', //.wrap的id
                wrap2: 'wrap2', //.wrap2的id
                len: 8, //一共有幾頁，這裏就是數字幾
                n: 0 //頁面一打開默認在第幾頁？第一頁就是0，第二頁就是1
            });
        </script>
    </body>

</html>

方法二：web

效果圖以下：app

總體代碼以下：ui

<!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>

總結：但願上面兩種方法對你們有所幫助，最後，祝你們六一快樂啦！spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。