全国统一服务热线：400-633-9193

  1. 主页
  2. 知识中心
  3. 软件开发

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

    网络     2017-11-20    2735

基本思路：

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

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

具体代码如下：

html

1
2
3
4
5
6
7
8
9
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
*{
      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的基数 （放在页面头部）

1
document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth/10 + "px";

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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实现移动端整页滑屏示，具体代码如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!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+html获取系统当前时间

热门文章

随机文章

友情
链接
甘肃明星软件公司
北京神州祥龙科技公司
神州祥龙在线财务
百度
360搜索
腾讯
IT资讯
IT网易科技
华军软件园
天空下载

Copyright @甘肃明星软件开发有限公司

全国统一服务热线：400-633-9193

E-mail：417560663@qq.com

网站备案：陇ICP备2021002704号-1

甘公网安备 62010202002545号

0.2378s