首页
所有分类
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 相关文章推荐
轻轻松松学JS调试（不下载任何工具）
Apr 14 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
深入理解JavaScript系列（42）：设计模式之原型模式详解
Mar 04 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）
May 10 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 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
香港购物网站(84) SLi Minor 2020(63) CPU(2) 德生G88(1) ICF-F10(1) AE3805(1) 天梯图(1) 纸巾盒(1) 美国购物网站(1542) 爱尔兰购物网站(30)
You might like
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
犀利的js 函数集合
2009/06/11 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
axios学习教程全攻略
2017/03/26 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
微信小程序实现授权登录
2019/05/15 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
Python实现二维有序数组查找的方法
2016/04/27 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
学习python可以干什么
2019/02/26 Python
详解Python正则表达式re模块
2019/03/19 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
浅析Python的命名空间与作用域
2020/11/25 Python
美体小铺加拿大官方网站：The Body Shop加拿大
2016/10/30 全球购物
乐高奥地利官方商店：LEGO Shop AT
2019/07/16 全球购物
short s1 = 1; s1 = s1 + 1;有什么错？ short s1 = 1; s1 += 1;有什么错？
2014/09/26 面试题
舞蹈兴趣小组活动总结
2014/07/07 职场文书
校运会广播稿
2015/08/19 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
ipad隐藏软件app图标方法
2022/04/19 数码科技
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js