JS实现移动端整屏滑动的实例代码基本思路：
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的基数（放在页⾯头部）
第⼆，具体的滑动操作代码
var oDiv = ElementById("wrap");
var aPages = ElementsByClassName("pages");
var aDots = ElementById("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].ansform = "translateY("+ -winH +"px)";
doSlide();
}else{
iNow--;
if(iNow<0){
iNow = aDots.length-1;
}
aPages[0].ansform = "translateY("+ winH +"px)";
doSlide("up");
}
}
html滚动效果代码
});
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].ansform = "translateY(0px)";
aPages[1].style.zIndex = 2;
aPages[0].style.zIndex = 3;
},300)
}else{
setTimeout(function(){
aPages[0].ansform = "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" >2</div>        <div class="page">3</div>
<div class="page" >4</div>        <div class="page">5</div>
<div class="page" >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 {
}
}, false)
var pages = function(obj) {
var box = ElementById(obj.wrap);
var box2 = ElementById(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(!uches.length) {
return;
}
startY = uches[0].pageY;
moveY = 0;
};
//touchMove
var touchmove = function(event) {
if(!uches.length) {
return;
}
moveY = uches[0].pageY - startY;
ansform = '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;
//重定位
ansform = '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实现移动端整屏滑动的实例代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。