首页
所有分类
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 用6N±1法求素数 实例教程
Oct 20 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
js实现导航吸顶效果
Feb 24 Javascript
vue-ajax小封装实例
Sep 18 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 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) 匹配(1) geoserver(1) sql模式(1) lua(3) postcss-px2rem(1) into outfile(1) 绝对定位(1) 相对定位(1) 索引树扫描(1)
You might like
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php进程间通讯实例分析
2016/07/11 PHP
php生成与读取excel文件
2016/10/14 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
遨游，飞飞，IE，空中网 浏览器无提示关闭方法
2011/07/11 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码，让你轻松了拖拽的原理)
2015/01/23 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
Nuxt.js实战详解
2018/01/18 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
npm qs模块使用详解
2020/02/07 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
Python import自定义模块方法
2015/02/12 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
英国著名国际平价时尚男装品牌：Topman
2016/08/27 全球购物
N:Philanthropy官网：美国洛杉矶基础款服装
2020/06/09 全球购物
超市后勤自我鉴定
2014/01/17 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
JavaScript实现优先级队列
2021/12/06 Javascript
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis