本文通过实例代码给大家分享了基于js 实现移动端整屏滑动效果，基本思路是检测手指滑动方向，获取手指抬起时的位置，减去手指按下时的位置，得正即为向下滑动了，本文就和大家分享js实现移动端整屏滑动的实例代码。
基本思路：
1）检测手指滑动方向：获取手指抬起时的位置，减去手指按下时的位置，得正即为向下滑动了
2）手指抬起后，向对应反向操作改变当前页的位置
具体代码如下：
html
<p> </p><p>第一屏</p> <p>第二屏</p> <p>第三屏</p> <p>第四屏</p> <p> <span></span><span></span><span></span><span></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>winH/20){ //只有当滑动距离大于了一定值得时候，才执行切换
if(disY=aDots.length){
iNow = 0;
}
aPages[0].style.transform = "translateY("+ -winH +"px)";
doSlide();
}else{
iNow--;
if(iNow<p><span style="color: #ff0000"><strong>好了，在给大家分享一段简单的代码，JS实现移动端整页滑屏示，具体代码如下所示：</strong></span></p>
<pre class="brush:js;">html>
<meta>
<meta>
<meta>
<meta>
<meta>
<meta>
<title>移动端整页滑屏示例</title>
<style>
* {
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>
<p>
</p><p>
</p><p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<script>
//重要！禁止移动端滑动的默认事件
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>
相关推荐：
