2048
官方抖音号:“前端gogogo”,大家一起来交流前端经验和技术啊,一起来吹吹水啦
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

移动端整页滑屏示例

移动端整页滑屏作者:猿2048志愿者
<!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>移动端整页滑屏示例</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                font-family: Verdana;
            }
            
            body,
            html {
                height: 100%;
                background-color: #000000;
            }
            
            .wrap {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            
            .wrap2 {
                width: 100%;
                height: 1000%;
                transition: 0.3s linear
            }
            
            .page {
                width: 100%;
                height: 10%
            }
            
            .page {
                background-color: #fdfdfd;
                font-size: 100px;
                line-height: 400px;
                text-align: center;
                font-weight: bold;
            }
        </style>

    </head>

    <body>
        <div class="wrap" id="wrap">
            <div class="wrap2" id="wrap2">
                <div class="page">1</div>
                <div class="page" style="background-color:#dddddd;">2</div>
                <div class="page">3</div>
                <div class="page" style="background-color:#dddddd;">4</div>
                <div class="page">5</div>
                <div class="page" style="background-color:#dddddd;">6</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 touch中比需抖接朋功要朋插move = function(event) {
                    if(!event.touches.length) {
                        return;
                    }
                    moveY = event.touches[0].pageY - startY;
                    box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面
                };
                //touchEnd
                var touche遇新是直朋能到分览nd = 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: 6, //一共有几页
                n: 0 //页面一打开默认在第几页?第一页就是0,第二页就是1
            });
        </script>
    </body>

</html>

 

本文来源于网络:查看 >
【推荐】帖子搞不懂,找猿2048老师指导一下?
« 上一篇:Web开发入门不得不看章
» 下一篇:块级元素行内元素以及display属性
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
阿里云
相关博文
推荐案例
×添加代码片段