移动端特效

一、触屏事件touch

触屏事件（touch）也称触摸事件，touch对象代表一个触摸点（触摸点可能是一根手指，也可能是一根触摸笔），触屏事件可响应用户手指对屏幕或触控板操作。

1、常用的触屏事件

触屏touch事件	说明
touchstart	手指触摸得到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

2、触屏事件对象touchEvent

tochEvent是一类描述手指在触摸平面的状态变化的事件。用于描述一个或多个触点
touchstart、touchmove、touchend三个事件都会各自有事件对象
触摸事件对象常见对象

触摸事件对象	说明
touches	正在触摸屏幕的所有手指的一个列表
`targetTouches`	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生改变的列表（从无到有、从有到无的变化）

3、移动端拖动元素

① touchstart、touchmove、touchend三个事件可以实现拖动元素
② 获得手指当前的坐标值，可以使用targetTouches[0]里面的pageX和pageY
③ 移动端拖动的原理：手指移动中，计算手指移动的距离，然后用盒子原来的距离 + 手指移动的距离
④ 手指移动的距离：手指滑动中的位置 - 手指刚开始触摸的位置

拖动三部曲
《1》触摸元素touchstart：获取手指初始坐标，同时获取盒子原来的位置
《2》移动手指touchmove：计算手指的滑动距离，并且移动盒子
《3》离开手指touchend
注意：手指移动也会触发滚动屏幕事件，因此可以阻止默认的屏幕滚动e.preventDefault()

// 移动div元素
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
      
      
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
  <script>
    var div = document.querySelector("div");
    var x = 0;
    var y = 0;
    var startX = 0;
    var startY = 0;
    div.addEventListener("touchstart", function (e) {
      
      
      startX = e.targetTouches[0].pageX;
      startY = e.targetTouches[0].pageY;
      x = this.offsetLeft;
      y = this.offsetTop;
    });
    div.addEventListener("touchmove", function (e) {
      
      
      var moveX = e.targetTouches[0].pageX - startX;
      var moveY = e.targetTouches[0].pageY - startY;
      div.style.left = x + moveX + "px";
      div.style.top = y + moveY + "px";
      e.preventDefault();
    });
    div.addEventListener("touchend", function () {
      
      });
  </script>
</html>

二、移动端常见特效

1、classList属性

classList属性是HTML5新增的一个属性，返回元素的类名，但是IE10以上版本支持
该属性用于在元素中添加，移除及切换CSS类
添加类

element.classList.add("类名");

移除类

element.classList.romove("类名");

切换类

element.classList.toggle("类名");

注意点：以上方法所有类名不带点

2、移动端轮播图

前后各多放一张轮播图

扫描二维码关注公众号，回复： 15664099 查看本文章

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
      
      
        margin: 0;
        padding: 0;
      }
      .banner {
      
      
        position: relative;
        width: 100%;
      }
      ul {
      
      
        width: 500%;
      }
      ul,
      ol,
      li {
      
      
        list-style: none;
        padding: 0;
        margin: 0;
      }
      ul li {
      
      
        float: left;
        width: 20%;
      }
      ol {
      
      
        position: absolute;
        top: 55px;
        right: 30px;
      }
      ol li {
      
      
        float: left;
        width: 10px;
        height: 10px;
        border: 1px solid #fff;
        box-sizing: border-box;
        margin-right: 5px;
        border-radius: 5px;
        transition: all 0.3s;
      }

      ol .current {
      
      
        background-color: #fff;
        width: 20px;
      }
      img {
      
      
        display: inline-block;
        height: auto;
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="banner">
      <ul>
        <li>
          <img src="./img/focus3.jpg" alt="" srcset="" />
        </li>
        <li>
          <img src="./img/focus1.jpg" alt="" srcset="" />
        </li>
        <li>
          <img src="./img/focus2.jpg" alt="" srcset="" />
        </li>
        <li>
          <img src="./img/focus3.jpg" alt="" srcset="" />
        </li>
        <li>
          <img src="./img/focus1.jpg" alt="" srcset="" />
        </li>
      </ul>

      <ol>
        <li class="current"></li>
        <li></li>
        <li></li>
      </ol>
    </div>
  </body>
  <script>
    window.addEventListener("load", function () {
      
      
      var banner = document.querySelector(".banner");
      var w = banner.offsetWidth;
      var ul = document.querySelector("ul");
      var ol = document.querySelector("ol");
      var index = 0;
      var timer = setInterval(function () {
      
      
        index++;
        var translatex = -index * w;
        ul.style.transition = "all .3s";
        ul.style.transform = "translateX(" + translatex + "px)";
      }, 2000);

      ul.addEventListener("transitionend", function () {
      
      
        if (index >= 3) {
      
      
          index = 0;
          ul.style.transition = "none";
          var translatex = -index * w;
          ul.style.transform = "translateX(" + translatex + "px)";
        } else if (index < 0) {
      
      
          index = 2;
          ul.style.transition = "none";
          var translatex = -index * w;
          ul.style.transform = "translateX(" + translatex + "px)";
        }
        ol.querySelector(".current").classList.remove("current");
        ol.children[index].classList.add("current");
      });

      var startX = 0;
      var moveX = 0;
      var flag = false;
      ul.addEventListener("touchstart", function (e) {
      
      
        startX = e.targetTouches[0].pageX;
        clearInterval(timer);
      });

      ul.addEventListener("touchmove", function (e) {
      
      
        moveX = e.targetTouches[0].pageX - startX;
        var translatex = -index * w + moveX;
        ul.style.transition = "none";
        ul.style.transform = "translateX(" + translatex + "px)";
        flag = true;
        e.preventDefault();
      });

      ul.addEventListener("touchend", function (e) {
      
      
        if (flag) {
      
      
          if (Math.abs(moveX) > 50) {
      
      
            if (moveX > 0) {
      
      
              index--;
            } else {
      
      
              index++;
            }
            var translatex = -index * w;
            ul.style.transition = "all .3s";
            ul.style.transform = "translateX(" + translatex + "px)";
          } else {
      
      
            var translatex = -index * w;
            ul.style.transition = "all .1s";
            ul.style.transform = "translateX(" + translatex + "px)";
          }
        }
        clearInterval(timer);
        timer = setInterval(function () {
      
      
          index++;
          var translatex = -index * w;
          ul.style.transition = "all .3s";
          ul.style.transform = "translateX(" + translatex + "px)";
        }, 2000);
      });
    });
  </script>
</html>

3、click延时解决方案

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
《1》禁止缩放
浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟

<meta name="viewport" content="user-scalable=no">

《2》利用touch事件封装事件解决
原理：当手指接触屏幕事件小于150ms，并且没有滑动过屏幕，就把行为定义为点击

function tap (obj, callback) {
    
    
 var isMove = false;
 var startTime = 0; // 记录触摸时候的时间变量
 obj.addEventListener('touchstart', function (e) {
    
    
 startTime = Date.now(); // 记录触摸时间
 });
 obj.addEventListener('touchmove', function (e) {
    
    
 isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击
 });
 obj.addEventListener('touchend', function (e) {
    
    
 if (!isMove && (Date.now() - startTime) < 150) {
    
     // 如果手指触摸和离开时间小于150ms 算点击
 callback && callback(); // 执行回调函数
 }
 isMove = false; // 取反 重置
 startTime = 0;
 });
}
//调用 
 tap(div, function(){
    
     // 执行代码 });

《3》使用插件
fastclick 插件可以解决 300ms 延迟

三、移动端常用开发插件

插件：一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

《1》swiper插件
开源、免费、强大的触摸滑动插件
中文官网地址： https://www.swiper.com.cn/
《2》SuperSlide插件
网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！
中文官网地址：http://www.superslide2.com/
《3》iScroll插件
iScroll是一款高性能、占地面积小、无依赖性的多平台javascript滚动器
中文官网地址： https://github.com/cubiq/iscroll

四、移动端常用开发框架

框架：会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架
本身，使用者要按照框架所规定的某种规范进行开发。

前端常用的框架有**加粗样式** 等。既能开发PC端，也能开发移动端
前端常用的移动端插件有 swiper、superslide、iscroll等。

框架和插件的区别
框架：大而全，一整套解决方案
插件：小而专一，某个功能的解决方案

JS学习第7天——移动端特效（触屏事件touch、classList属性、轮播图、click延时解决方案、常用开发插件和开发框架）

目录