JS实现移动端整屏滑动的实例代码

时间：2021-05-26

基本思路：

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){ //只有当滑动距离大于了一定值得时候，才执行切换 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实现移动端整屏滑动的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章