本文通过实例代码给大家分享了基于js 实现移动端整屏滑动效果,基本思路是检测手指滑动方向,获取手指抬起时的位置,减去手指按下时的位置,得正即为向下滑动了,本文就和大家分享JS实现移动端整屏滑动的实例代码。
基本思路:
1)检测手指滑动方向:获取手指抬起时的位置,减去手指按下时的位置,得正即为向下滑动了
2)手指抬起后,向对应反向操作改变当前页的位置
具体代码如下:
html
<p id="wrap"> <p id="page01" class="pages">第一屏</p> <p id="page02" class="pages">第二屏</p> <p id="page03" class="pages">第三屏</p> <p id="page04" class="pages">第四屏</p> </p> <p id="dots"> <span class="now"></span><span class=""></span><span class=""></span><span class=""></span> </p>
css
*{ margin:0; padding:0; } body{ overflow: hidden; } #wrap > p{ 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 op = document.getElementById("wrap"); var aPages = op.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; op.style.height = winH + "px"; //手指拖动事件(去除默认动作) document.addEventListener("touchmove",function(e){ e.preventDefault(); }); var YStart = 0; var iNow = 0; //手指按下 op.addEventListener("touchstart",function(e){ YStart = e.changedTouches[0].clientY; }); //手指移动 op.addEventListener("touchmove",function(e){ disY = e.changedTouches[0].clientY-YStart; //向下滑正,向上滑负 }); //手指离开 op.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; op.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; op.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> <p class="wrap" id="wrap"> <p class="wrap2" id="wrap2"> <p class="page">1</p> <p class="page" style="background-color:#dddddd;">2</p> <p class="page">3</p> <p class="page" style="background-color:#dddddd;">4</p> <p class="page">5</p> <p class="page" style="background-color:#dddddd;">6</p> </p> </p> <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如何实现移动端整屏滑动的详细内容。更多信息请关注PHP中文网其他相关文章!