基本思路：
1）檢測手指滑動方向：獲取手指抬起時的位置，減去手指按下時的位置，得正即為向下滑動了
2）手指抬起后，向對應反向操作改變當前頁的位置
具體代碼如下：
html
<div id="wrap"> <div id="page01" class="pages">第一屏</div> <div id="page02" class="pages">第二屏</div> <div id="page03" class="pages">第三屏</div> <div id="page04" class="pages">第四屏</div></div><div id="dots"> <span class="now"></span><span class=""></span><span class=""></span><span class=""></span></div>
css
*{ margin:0; padding:0; } body{ overflow: hidden; } #wrap > div{ width: 10rem; position: absolute; left: 0; top: 0; background: #fff; transition: all 0.3s ease; } #dots{ position: fixed; right: 5px; top: 40%; z-index: 9; } #dots span{ display: block; height: 0.2rem; width: 0.2rem; border: 1px solid #000; border-radius: 50%; margin-bottom: 3px; } #dots .now{ background: #555; }js分為兩塊
第一，設置html標簽的font-size，以便設置rem的基數 （放在頁面頭部）
document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth/10 + "px";第二，具體的滑動操作代碼
window.onload = function(){ var oDiv = document.getElementById("wrap"); var aPages = oDiv.getElementsByClassName("pages"); var aDots = document.getElementById("dots").getElementsByTagName("span"); var winH = window.innerHeight; var tTime = 1; //設置每頁的高度和zindex值 for(var i=0; i<aPages.length; i++){ aPages[i].style.height = winH + "px"; aPages[i].style.zIndex = 1; } aPages[0].style.zIndex = 3; aPages[1].style.zIndex = 2; oDiv.style.height = winH + "px"; //手指拖動事件（去除默認動作） document.addEventListener("touchmove",function(e){ e.preventDefault(); }); var YStart = 0; var iNow = 0; //手指按下 oDiv.addEventListener("touchstart",function(e){ YStart = e.changedTouches[0].clientY; }); //手指移動 oDiv.addEventListener("touchmove",function(e){ disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑負 }); //手指離開 oDiv.addEventListener("touchend",function(e){ disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑負 if(Math.abs(disY)>winH/20){ //只有當滑動距離大于了一定值得時候，才執(zhí)行切換 if(disY<0){ iNow++; if(iNow>=aDots.length){ iNow = 0; } aPages[0].style.transform = "translateY("+ -winH +"px)"; doSlide(); }else{ iNow--; if(iNow<0){ iNow = aDots.length-1; } aPages[0].style.transform = "translateY("+ winH +"px)"; doSlide("up"); } } }); function doSlide(upflag){ for(var i=0;i<aDots.length;i++){ aDots[i].className = ""; } aDots[iNow].className = "now"; if(upflag){ //向上滑 aPages[3].style.zIndex = 2; aPages[1].style.zIndex = 1; oDiv.insertBefore(aPages[3],aPages[1]); setTimeout(function(){ aPages[1].style.transform = "translateY(0px)"; aPages[1].style.zIndex = 2; aPages[0].style.zIndex = 3; },300) }else{ setTimeout(function(){ aPages[0].style.transform = "translateY(0px)"; aPages[0].style.zIndex = 1; aPages[1].style.zIndex = 3; aPages[2].style.zIndex = 2; oDiv.appendChild(aPages[0]); },300) } } }好了，在給大家分享一段簡單的代碼，JS實現移動端整頁滑屏示，具體代碼如下所示：
<!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 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>總結
以上所述是小編給大家介紹的JS實現移動端整屏滑動的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
