六一广告页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