JS实现移动端整屏滑动的实例代码
程序员文章站
2022-06-17 13:27:39
基本思路：
1）检测手指滑动方向：获取手指抬起时的位置，减去手指按下时的位置，得正即为向下滑动了
2）手指抬起后，向对应反向操作改变当前页的位置
具体代码如下：
h...
基本思路：
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实现移动端整屏滑动的实例代码，希望对大家有所帮助