<!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>

H5-移动端实现滑屏翻页-原生js/jquery的更多相关文章

  1. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  2. 通过js实现整屏滑动+全屏翻页+动画展示+线性图

    技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js   概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...

  3. 移动端ios上下滑动翻页事件失效

    移动端开发过程中,在添加上下滑动事件时候,引入了最常用的移动端库zepto.js及其touch模块,有一种现象,安卓的手机没有问题,上下滑动翻页很正常 :但是到了ios上面,好啊,上下滑动会出现弹性滚 ...

  4. chromedriver 全屏 翻页 错误

    from selenium import webdriver from selenium.common.exceptions import TimeoutException, StaleElement ...

  5. 实现手机端上下左右滑屏的jq原生代码和使用库·两种办法

    先来一个原生的.我使用的是jq. 需要注意的地方就是被触发的元素最好不要是body,这个代码也可以修改,如果obj传进来的是body那么,$(this)必须是你的监听元素,不然会冒泡泡,整个项目就…… ...

  6. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  7. 移动端touch滑屏事件

    <script> var windowHeight = $(window).height(), $body = $("body");// console.log($(w ...

  8. 【原创】书本翻页效果booklet jquery插件系列之简介

    booklet jquery插件系列之简介 本文由五月雨恋提供,转载请注明出处. 一.安装 1.添加CSS和Javascript 添加booklet CSS文件到你的页面. <link rel= ...

  9. ajax无刷新翻页后，jquery失效问题的解决

    例如 $(".entry-title a").click(function () {   只对第一页有效, 修改为 $(document).on('click', ".e ...

随机推荐

  1. test6

  2. Asp.net Core认证和授权：JWT认证和授权

    JWT验证一般用户移动端,因为它不像cookie验证那样,没有授权跳转到登陆页面 JWT是json web token的简称,在  jwt.io 网址可以看到 新建一个API项目,通过postman ...

  3. Eclipse安装fatjar（不用自己下载fatjar包）

    .安装Eclipse-jee-luna-SR2-win32-x86_64版本的插件支持 方法如下: Help -> Install New Software... -> Work with ...

  4. #WEB安全基础 : HTTP协议 | 0x1 TCP/IP通信

    TCP/IP是如何通信的呢? 请看图 用TCP/IP协议族通信时,会通过分层顺序与对方进行通信.发送端从应用层往下走,接受层从链路层往上走. 客户端为了浏览界面在应用层发送请求,为了方便传输在传输层的 ...

  5. mongodb认识

    MongoDB安装 一.软件的获取地址 1.使用本安装文档提供的安装软件 本安装文档提供的软件为window版本的64位MongoDB的安装包 2.在官网上下载所需的安装软件 下载地址:https:/ ...

  6. lua 特殊时间格式转换

    [1]时间格式转换需求 工作中,因业务需要将时间格式进行转换.需求内容如下: 原格式:17:04:49.475  UTC Mon Mar 04 2019 转换格式:2019-03-04 17:04:4 ...

  7. maven ${path.separator}

    ${path.separator} 兼容 windows & linux: <compilerArguments> <verbose /> <bootclassp ...

  8. 用java生成32位全球唯一的id编号

    GUID是一个128位长的数字,一般用16进制表示.算法的核心思想是结合机器的网卡.当地时间.一个随即数来生成GUID.从理论上讲,如果一台机器每秒产生10000000个GUID,则可以保证(概率意义 ...

  9. 网站app被劫持怎么办?HTTPDNS阿里云域名防劫持, DNSPod 移动解析服务 D+

    网站app被劫持怎么办?HTTPDNS阿里云域名防劫持, DNSPod 移动解析服务 D+ HTTPDNS_移动开发_域名解析_域名防劫持-阿里云https://www.aliyun.com/prod ...

  10. Docker Swarm java 服务集群

    Docker Swarm java 服务集群 环境1: 系统:Linux Centos 7.4 x64 内核:Linux docker 3.10.0-693.2.2.el7.x86_64 Docker ...