JS基础—移动端网页特效

 因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

touches  正在触摸屏幕的所有手指的列表

targetTouches  正在触摸当前DOM元素的手指列表

注:如果监听的是一个dom元素，则touches和targetTouches是一样的

changedTouches  手指状态发生了改变的列表，从无到有或者从有到无

（注意：当手指离开屏幕的时候，就没有了 touches 和 targetTouches 列表，但是有。 changedTouches）

console.log(e.targetTouches[0]);
//targetTouches[0],就可以获得dom元素的第一个手指的相关信息，比如手指坐标等

focus.classList.add(‘current’);

focus.classList.remove(‘current’);

 var focus = document.querySelector('.focus');
  var ul = focus.children[0];
  //2.轮播图每2秒切换
  var index = 0
  var w = focus.offsetWidth;
  var Timer = setInterval(function () {
    index++;
    var translatex = -index * w;
    ul.style.transition = 'all .3s';
    ul.style.transform = 'translateX(' + translatex + 'px)'
  }, 2000);

案例分析：

① 自动播放功能-无缝滚动

② 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断

③ 此时需要添加检测过渡完成事件 transitionend

④ 判断条件： 如果索引号等于 3 说明走到最后一张图片，此时 索引号要复原为 0

⑤ 此时图片，去掉过渡效果，然后移动

⑥ 如果索引号小于0， 说明是倒着走， 索引号等于2

⑦ 此时图片，去掉过渡效果，然后移动

 ul.addEventListener('transitionend', function () {
    if (index >= 3) {
      index = 0;
      var translatex = -index * w;
      ul.style.transition = 'none';
      ul.style.transform = 'translateX(' + translatex + 'px)';
    }else if ( index < 0) {
      index = 2;
      var translatex = -index * w;
      ul.style.transition = 'none';
      ul.style.transform = 'translateX(' + translatex + 'px)';
    }
  })

案例分析：

① 小圆点跟随变化效果

② 把ol里面li带有current类名的选出来去掉类名 remove

③ 让当前索引号 的小li 加上 current add

④ 但是，是等着过渡结束之后变化，所以这个写到 transitionend 事件里面

 //3.小圆点跟随变化
    // 把ol里面li带有current类名的选出来去掉类名 remove
    ol.querySelector('.current').classList.remove('current');
    // 让当前索引号 的小li 加上 current add
    ol.children[index].classList.add('current');

案例分析：

① 手指滑动轮播图

② 本质就是ul跟随手指移动，简单说就是移动端拖动元素

③ 触摸元素 touchstart ： 获取手指初始坐标

④ 移动手指 touchmove ： 计算手指的滑动距离，并且移动盒子

//4.手指滑动轮播图
  //触摸元素  touchstart  获取手指初始坐标
  var startX = 0;
  var moveX = 0;
  var flag = false;
  ul.addEventListener('touchstart', function (e) {
    startX = e.targetTouches[0].pageX;
    //手指触摸的时候就清除计时器；
    clearInterval(Timer);
  })
  //移动手指  touchmove  获取手指的滑动距离  并且移动盒子
  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();//阻止滚蛋屏幕的默认行为
  })

案例分析：

⑤ 离开手指 touchend: 根据滑动的距离分不同的情况

⑥ 如果移动距离小于 某个像素 就回弹原来位置

⑦ 如果移动距离大于某个像素就上一张下一张滑动。

⑧ 滑动也分为左滑动和右滑动 判断的标准是 移动距离正负 如果是负值就是左滑 反之右滑

⑨ 如果是左滑 就播放下一张 （ index++ ）

⑩ 如果是右滑 就播放上一张 (index--)

 //手指离开  根据移动距离去判断是回弹还是播放上一张下一张
  ul.addEventListener('touchend', function (e) {
    if (flag) {
      //(1).如果移动距离大于50像素，就播放上一张或下一张
      if (Math.abs(moveX) > 50) {// Math.abs() 取绝对值
        //如果是右滑，就是播放上一张，moveX是正值
        if (moveX > 0) {
          index--;
        } else {
          //如果是左滑，就是播放下一张，moveX是负值
          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);
  })

2.1.2案例：返回顶部

//封装tap，解决click 300ms 延时
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) {
// 如果手指触摸和离开时间小于150ms 算点击
 if (!isMove && (Date.now() - startTime) < 150) { 
 callback && callback(); // 执行回调函数
 }
 isMove = false; // 取反 重置
 startTime = 0;
 });
}
//调用 
 tap(div, function(){ // 执行代码 });

if ('addEventListener' in document) {
 document.addEventListener('DOMContentLoaded', function() {
 FastClick.attach(document.body);
 }, false);
}