1

f6c2a962 · 华国豪 · 77a6bb37 · f6c2a962
Commit f6c2a962 authored Dec 11, 2019 by 华国豪 🙄
Hide whitespace changes
Inline Side-by-side

Showing with 134 additions and 0 deletions

testpage.html html/testpage.html +134 -0

No files found.
--- a/html/testpage.html
+++ b/html/testpage.html
+<!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>
+        <link rel="stylesheet" href="../css/animate.css">
+        <style type="text/css">
+        	*{padding:0;margin:0}
+			body,html{height:100%;background-color:#000}
+			.wrap{width:100%;height:100%;overflow:hidden}
+			.wrap2{width:100%;height:1000%;transition:.3s linear}
+			.page{width:100%;height:10%;background-color:#fdfdfd;font-size:12px;line-height:400px;text-align:center;font-weight:700}
+            .fan{position: fixed;width: 100%;text-align: center;z-index: 2;}
+            .fan-up{top: 1rem;}
+            .fan-down{bottom: 1rem;}
+        </style>
+    </head>
+    <body>
+        <div class="wrap" id="wrap">
+            <div class="fan fan-up animated fadeInDownBig" id="fan-up">上翻</div>
+            <div class="wrap2" id="wrap2">
+                <div class="page">我是第一屏内容</div>
+                <div class="page" style="background-color:#ccc;">我是第二屏内容</div>
+                <div class="page">我是第三屏内容</div>
+                <div class="page" style="background-color:#ccc;">我是第四屏内容</div>
+                <div class="page">我是第五屏内容</div>
+                <div class="page" style="background-color:#ccc;">我是第六屏内容</div>
+            </div>
+            <div class="fan fan-down animated fadeInUpBig"  id="fan-down">下翻</div>
+        </div>
+        <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
+        <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)
+            $("#fan-up").hide()
+            var pages = function(obj) {
+                var box = document.getElementById(obj.wrap);
+                var box2 = document.getElementById(obj.wrap2);
+                var pageUp = document.getElementById('fan-up')
+                var pageDown = document.getElementById('fan-down')
+                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) {
+                    console.log(moveY)
+                    //位移小于+-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) + '%)'; //根据百分比位置移动页面
+                    if (n == 0) {
+                        $("#fan-up").hide()
+                    } else {
+                        $("#fan-up").show()
+                    }
+                    if (n == len - 1) {
+                        $("#fan-down").hide()
+                    } else {
+                        $("#fan-down").show()
+                    }
+                    $("#fan-up").removeClass('fadeInDownBig')
+                    $("#fan-down").removeClass('fadeInUpBig')
+                    setTimeout(()=>{
+                        $("#fan-up").addClass('fadeInDownBig')
+                        $("#fan-down").addClass('fadeInUpBig')
+                    }, 500)
+                };
+                //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);
+                pageUp.addEventListener("click", function (event) {
+                    moveY = 100
+                    touchend(event)
+                }, false)
+                pageDown.addEventListener("click", function (event) {
+                    moveY = -100
+                    touchend(event)
+                }, false)
+            };
+            pages({
+                wrap: 'wrap', //.wrap的id
+                wrap2: 'wrap2', //.wrap2的id
+                len: 6, //一共有几页
+                n: 0 //页面一打开默认在第几页？第一页就是0，第二页就是1
+            });
+        </script>
+    </body>
+
+</html>