H5-移动端实现滑屏翻页-原生js/jquery

时间：2022-05-21 11:01:20
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>触摸滑屏</title>

  <style>

    html,body,h2 {

      margin: 0;

      padding: 0;

    }

    html,body,#wraper,#content {

      width: 100%;

      height: 100%;

    }

    #wraper {

      overflow: hidden;

    }

    #content {

      transition: all 1s linear;

    }

    .page {

      width: 100%;

      height: 100%;

    }

    #page1 {

      background: #f00

    }

    #page2 {

      background: #0f0

    }

    #page3 {

      background: #00f

    }

  </style>

</head>

<body>

  <div id="wraper">

    <div id="content">

      <div class="page" id="page1">

        page1

      </div>

      <div class="page" id="page2">

        page2

      </div>

      <div class="page" id="page3">

        page3

      </div>

    </div>

  </div>

  <script>

    var page1 = document.getElementById('page1'),        //滑动item

        page2 = document.getElementById('page2'),

        page3 = document.getElementById('page3'),

        wraper = document.getElementById('wraper'),

        content = document.getElementById('content');    //滑动容器

    var itemHeight = wraper.offsetHeight;                //滑动item高度

    var index = 0;                                       //滑动计数

    var moveY,                                           //滑动距离

        endY,                                            //滑动停止的Y坐标

        startY;                                          //滑动开始的Y坐标

    // content.style.height = (itemHeight * 3) + 'px'

    // 触摸开始

    function boxTouchStart(e) {

      console.log(e)

      var touch = e.touches[0];

      startY = touch.pageY;

      endY = content.style.webkitTransform;

      if(!endY){

        endY = 0;

      }else{

        endY = parseInt(endY.replace('translateY(',''))

      }

    }

     // 触摸结束

    function boxTouchEnd(e) {

      console.log(e)

    }

    // 触摸移动

    function boxTouchMove(e) {

      var touch = e.touches[0];

      moveY = touch.pageY - startY;

      index = Number(e.target.id.split('page')[1])

        //下一页

      if(moveY < 0) {

        if(index == 3) {

          return false;

        }

        content.style.webkitTransform = 'translateY(-'+(itemHeight*index)+'px)'

      }

      //上一页

      else if(moveY > 0) {

        if(index == 1) {

          return false;

        }

        content.style.webkitTransform = 'translateY('+(itemHeight+endY)+'px)'

      }

    }

    content.addEventListener('touchstart', boxTouchStart, false )

    content.addEventListener('touchmove', boxTouchMove, false)

    content.addEventListener('touchend', boxTouchEnd, false)

  </script>

</body>

</html>

ps: 水平位置同理，将Y换成X即可

2.今天补充第二种滑动效果，这种属于重叠的滑动效果，楼主做微信H5的移动端活动页面，该死的android，由于有input框，使用translateY()这种操作，

软键盘弹出后，会出现白屏，所以做了修改；

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>触摸滑屏</title>

  <style>

    html,body,h2 {

      margin: 0;

      padding: 0;

    }

    html,body,#wraper,#content {

      width: 100%;

      height: 100%;

    }

    #wraper {

      overflow: hidden;

    }

    #content {

      transition: all 1s linear;

    }

    .page {

      width: 100%;

      height: 0;

      overflow: hidden;

      transition: all 1s linear;

      color: #ff0

    }

    #page1 {

      height: 100%;

      background: #f00

    }

    #page2 {

      background: #0f0

    }

    #page3 {

      background: #00f

    }

    /* img {

        width: auto;

        height: auto;

    } */

  </style>

</head>

<body>

  <div id="wraper">

    <div id="content">

      <div class="page" id="page1">

        page1

         <img src="https://dimg04.c-ctrip.com/images/300p0f0000007eqxf6DAD_C_228_132.jpg" alt="" />

        </div>

      <div class="page" id="page2">

          <img src="https://dimg06.c-ctrip.com/images/350d0p000000fekw944EE_R_228_132_Q90.jpg" alt="" />

          page2

      </div>

      <div class="page" id="page3">

         <img src="https://dimg04.c-ctrip.com/images/300v0o000000fftlb25BA_C_228_132.jpg" alt="" />

         page3

        <button class="back">back</button>

      </div>

    </div>

  </div>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

  <script>

    var page1 = document.getElementById('page1'),        //滑动item

        page2 = document.getElementById('page2'),

        page3 = document.getElementById('page3'),

        wraper = document.getElementById('wraper'),

        content = document.getElementById('content');    //滑动容器

    var itemHeight = wraper.offsetHeight;                //滑动item高度

    var index = 0;                                       //滑动计数

    var moveY,                                           //滑动距离

        endY,                                            //滑动停止的Y坐标

        startY;                                          //滑动开始的Y坐标

    // content.style.height = (itemHeight * 3) + 'px'

    // 触摸开始

    function boxTouchStart(e) {

      var touch = e.touches[0];

      startY = touch.pageY;

    }

    // 触摸移动

    function boxTouchMove(e) {

      var touch = e.touches[0];

      moveY = touch.pageY - startY;

      index = Number(e.target.id.split('page')[1])

        //下一页

      if(moveY < 0) {

        if(index == 3) {

          return false;

        }

        $('#page'+index).css('height', '0px')

        $('#page'+(index+1)).css('height', itemHeight+'px')

      }

    }

    $('.back').click(function() {

        $('#page3').css('height', '0px')

        $('#page1').css('height', itemHeight+'px')

    })

    content.addEventListener('touchstart', boxTouchStart, false )

    content.addEventListener('touchmove', boxTouchMove, false)

  </script>

</body>

</html>

相关文章