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

Javascript 相关文章推荐
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
js实现简单进度条效果
Mar 25 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
You might like
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
php桥接模式应用案例分析
2019/10/23 PHP
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
js实现3D旋转相册
2020/08/02 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python类和继承用法实例
2015/07/07 Python
flask-restful使用总结
2018/12/04 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
东方电视购物:东方CJ
2016/10/12 全球购物
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
恶意软件的定义
2014/11/12 面试题
AJAX都有哪些有点和缺点
2012/11/03 面试题
医学生自我评价
2014/01/27 职场文书
服装发布会策划方案
2014/05/22 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
会计岗位工作总结
2015/08/12 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
《月光曲》教学反思
2016/02/16 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js