首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 10, 2017

基本思路：

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

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

具体代码如下：

html

<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

*{
      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的基数 （放在页面头部）

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

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

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实现移动端整页滑屏示，具体代码如下所示：

<!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实现移动端整屏滑动的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

苏天天

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 面向对象 function类
May 13 Javascript
jquery ui对话框实例代码
May 10 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
js创建对象的方法汇总
Jan 07 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
Vue.js对象转换实例
Jun 07 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
详解React的回调渲染模式
Sep 10 Javascript
Three.js加载外部模型的教程详解
Nov 10 #Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 #Javascript
three.js加载obj模型的实例代码
Nov 10 #Javascript
vue router-link传参以及参数的使用实例
Nov 10 #Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 #Javascript
js+html获取系统当前时间
Nov 10 #Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 #Javascript
数据加密(1) kafka(2) HDR(1) 高动态范围(1) key(1) 曝光融合(1) shell脚本(1) 公共键(1) pycryto(1) 连接器(1)
You might like
玩转图像函数库―常见图形操作
2006/09/03 PHP
精通php的十大要点(上)
2009/02/04 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
PHP数据过滤的方法
2013/10/30 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
javascript校验价格合法性实例（必须输入2位小数）
2014/05/05 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
jquery动画效果学习笔记（8种效果）
2015/11/13 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python选课系统开发程序
2016/09/02 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python cookbook（数据结构与算法）实现优先级队列的方法示例
2018/02/18 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
匡威荷兰官方网站：Converse荷兰
2018/10/24 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
市场部业务员岗位职责
2014/04/02 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
工作感言一句话
2015/08/01 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
Python实现聚类K-means算法详解
2022/07/15 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android