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

前端之家收集整理的这篇文章主要介绍了JS实现移动端整屏滑动的实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

基本思路:

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

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

具体代码如下:

html

css

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的基数 (放在页面头部)

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

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

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

<Meta charset="UTF-8"/> <Meta content="yes" name="mobile-web-app-capable"> 移动端整页滑屏示例