移動端整頁滑屏示例（上下滑動整屏）
<!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; } 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%; 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">我是第一屏內容</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> <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: 6, //一共有幾頁 n: 0 //頁面一開啟預設在第幾頁？第一頁就是0，第二頁就是1 }); </script> </body>
</html>