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 getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
vue界面发送表情的实现代码
Sep 11 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
星际流派综述
2020/03/04 星际争霸
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
移动端js图片查看器
2016/11/17 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
手术室护士自我鉴定
2013/10/14 职场文书
总经理秘书的岗位职责
2013/12/27 职场文书
销售助理岗位职责
2014/02/21 职场文书
党员转正党支部意见
2015/06/02 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
MySQL sql模式设置引起的问题
2022/05/15 MySQL