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

時間 2020-06-02

標籤六一廣告 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

原文出處：https://www.cnblogs.com/hejun26/p/10953882.htmlscala

相關標籤/搜索

每日一句

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