移动端网页特效

触摸事件

1.1触摸事件概述

　　移动端浏览器兼容性较好，我们不需要考虑以前js的兼容性问题，可以放心的使用原生js书写效果，但是移动端也有自己独特的地方。比如触屏事件touch（也称触摸事件），Android和IOS都有。

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

　　常见的触屏事件如下：

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

 

 

 

 

 

1.2触摸事件对象（TouchEvent）

　　TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个出点，使开发者可以检测触点的移动，触点的增加和减少，等等。

　　touchstart、touchmove、touchend三个事件都会有各自有事件对象。

触摸事件对象重点我们看三个常见对象列表

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无变化

 

 

 

 

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

1.3移动端拖动元素

1.touchstart、touchmove、touchend可以实现拖动元素。

2.但是拖动元素需要当前手指的坐标值，我们可以使用targetTouches[0]里面的pageX和pageY。

3.移动端拖动的原理: 手指移动中，计算出手指移动的距离。然后利用盒子原来的位置+手指移动的距离。

4.手指移动的距离： 手指滑动中的位置减去手指刚开始触摸的位置。

拖动元素三部曲：

（1）触摸元素touchstart： 获取手指初始坐标，同时获得盒子原来的位置。

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

（3）离开手指touchend；

注意：手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动e.preventDefault()

移动端常见特效

移动端轮播图：

window.addEventListener('load', function() {
  // 1.获取元素
  var focus = document.querySelector('.focus');
  var ul = focus.children[0];
  // 获取focus的宽度
  var w = focus.offsetWidth;
  var ol = focus.children[1];
  // 2.利用定时器自动播放轮播图图片
  var index = 0;
  var timer = setInterval(function() {
    index++;
    var translateX = -index * w;
    ul.style.transition = 'all 0.3s';
    ul.style.transform = 'translateX(' + translateX + 'px)';
  }, 2000);
  // 等着我们过渡完成之后，再去判断，监听过渡完成的事件 transitionend
  ul.addEventListener('transitionend', function() {
    // 无缝滚动
    if(index>= 3) {
      index = 0;
      // 去掉过渡效果， 这样让我们的ul，快速的跳到目标位置
      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)';
    }
    // 3. 小圆点跟随变化
    // 把ol里面li带有current类名的选出来去掉类名 remove
    ol.querySelector('.current').classList.remove('current');
    // 让当前索引号的小li 加上current add
    ol.children[index].classList.add('current');
  });
  // 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(); // 阻止滚动屏幕的行为
  });
  // 手指离开， 根据移动距离去判断是回弹还是播放上一张下一张
  ul.addEventListener('touchend', function(e) {
    if(flag) {
      // (1)如果移动距离大于50像素，我们就播放上一张或者下一张
      if(Math.abs(moveX) > 50) {
        // 如果是右滑，就是 播放上一张，moveX是正值
        if(moveX > 0) {
          index--;
        } else {
          index++;
        }
        var translatex = -index * w;
        ul.style.transition = 'all 0.3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
      } else {
        var translatex = -index * w;
        ul.style.transition = 'all 0.1s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
      }
    }
    // 手指离开时候重新开启定时器
    clearInterval(timer);
    timer = setInterval(function() {
      index++;
      var translateX = -index * w;
      ul.style.transition = 'all 0.3s';
      ul.style.transform = 'translateX(' + translateX + 'px)';
    }, 2000); 
  });
})

移动端常用开发插件

 <div></div>
 <script src="fastclick.js"></script>
    <script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
        var div = document.querySelector('div');
        div.addEventListener('click', function() {
            alert(11);
        })
    </script>

移动端常用开发框架