好资源导航 » 文章资讯 » JS实现移动端整屏滑动的实例代码

JS实现移动端整屏滑动的实例代码

2023-09-21 06:17:05 61

基本思路：

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

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

具体代码如下：

html


第一屏

第二屏

第三屏

第四屏

css

*{
margin:0;
padding:0;
}
body{
overflow:hidden;
}
#wrap>div{
width:10rem;
position:absolute;
left:0;
top:0;
background:#fff;
transition:all0.3sease;
}
#dots{
position:fixed;
right:5px;
top:40%;
z-index:9;
}
#dotsspan{
display:block;
height:0.2rem;
width:0.2rem;
border:1pxsolid#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(){
varoDiv=document.getElementById("wrap");
varaPages=oDiv.getElementsByClassName("pages");
varaDots=document.getElementById("dots").getElementsByTagName("span");
varwinH=window.innerHeight;
vartTime=1;
//设置每页的高度和zindex值
for(vari=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");
}
}
});
functiondoSlide(upflag){
for(vari=0;i
好了，在给大家分享一段简单的代码，JS实现移动端整页滑屏示，具体代码如下所示：









移动端整页滑屏示例

*{
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.3slinear
}
.page{
width:100%;
height:10%
}
.page{
background-color:#fdfdfd;
font-size:100px;
line-height:400px;
text-align:center;
font-weight:bold;
}





1
2
3
4
5
6



//重要！禁止移动端滑动的默认事件
document.body.addEventListener('touchmove',function(event){
event=event?event:window.event;
if(event.preventDefault){
event.preventDefault()
}else{
event.returnValue=false
}
},false)
varpages=function(obj){
varbox=document.getElementById(obj.wrap);
varbox2=document.getElementById(obj.wrap2);
varlen=obj.len;
varn=obj.n;
varstartY,moveY,cliH;
//获取屏幕高度
vargetH=function(){
cliH=document.body.clientHeight
};
getH();
window.addEventListener('resize',getH,false);
//touchStart
vartouchstart=function(event){
if(!event.touches.length){
return;
}
startY=event.touches[0].pageY;
moveY=0;
};
//touchMove
vartouchmove=function(event){
if(!event.touches.length){
return;
}
moveY=event.touches[0].pageY-startY;
box2.style.transform='translateY('+(-n*cliH+moveY)+'px)';//根据手指的位置移动页面
};
//touchEnd
vartouchend=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
});



总结
以上所述是小编给大家介绍的JS实现移动端整屏滑动的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
                
            
              
            
                                    上一篇
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
                
                                    下一篇
Java实现双链表互相交换任意两个节点的方法示例
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            一个不错的js html页面倒计时可精确到秒
                        
                                            
                            DevExpress之ChartControl的SeriesTemplate实例
                        
                                            
                            Android中生成、使用Json数据实例
                        
                                            
                            C++实现ping程序实例
                        
                                            
                            Android XML数据解析简单示例
                        
                                            
                            Android AES加密工具类分享
                        
                                            
                            C#对称加密与非对称加密实例
                        
                                            
                            Javascript中的默认参数详解
                        
                                            
                            C#为配置文件加密的实现方法
                        
                                            
                            DevExpress之ChartControl实现时间轴实例
                        
                                            
                            Javascript 数组排序详解
                        
                                            
                            C++之boost::array的用法
                        
                                            
                            Shell最多支持多少个参数？
                        
                                            
                            Shell脚本中判断输入参数个数的方法
                        
                                            
                            Shell脚本中判断输入变量或者参数是否为空的方法
                        
                                            
                            javascript数组详解
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图