JS如何实现移动端整屏滑动-js-Tutorial-php.cn

本文通过实例代码给大家分享了基于js 实现移动端整屏滑动效果，基本思路是检测手指滑动方向，获取手指抬起时的位置，减去手指按下时的位置，得正即为向下滑动了，本文就和大家分享JS实现移动端整屏滑动的实例代码。

基本思路：

1）检测手指滑动方向：获取手指抬起时的位置，减去手指按下时的位置，得正即为向下滑动了

2）手指抬起后，向对应反向操作改变当前页的位置

具体代码如下：

html

第一屏

第二屏

第三屏

第四屏

Nach dem Login kopieren

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; }

Nach dem Login kopieren

js分为两块

第一，设置html标签的font-size，以便设置rem的基数（放在页面头部）

document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth/10 + "px";

Nach dem Login kopieren

第二，具体的滑动操作代码

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; iwinH/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
        
         Nach dem Login kopieren

好了，在给大家分享一段简单的代码，JS实现移动端整页滑屏示，具体代码如下所示：

移动端整页滑屏示例