No.29 网页特效

一、元素偏移量 offset 系列

offset 翻译过来就是偏移量，使用 offset 系列相关属性可以动态地得到该元素的位置（偏移）、大小等。
获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意： 返回的数值都不带单位

offset 系列常用属性

offset

offset 与 style 区别

二、元素可视区 client 系列

client 翻译过来就是客户端，使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态地得到该元素的边框大小、元素大小等。

client 系列常用属性

client

三、元素滚动 scroll 系列

scroll 翻译过来就是滚动的，使用 scroll 系列的相关属性可以动态地得到该元素的大小、滚动距离等。

scroll 系列常用属性

scroll

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。

页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧 window.pageXOffset
注意，元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset
其实这个值 可以通过盒子的 offsetTop 可以得到

页面被卷去的头部兼容性解决方案：
需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

1. 声明了 DTD，使用 document.documentElement.scrollTop
2. 未声明 DTD，使用 document.body.scrollTop
3. 新方法 window.pageYOffset 和 window.pageXOffset，IE9 开始支持

function getScroll() {
  return {
    left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
    top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
  };
} 

使用的时候 getScroll().left，参考对象相关使用方式。

滚动窗口至文档中的特定位置
window.scroll(x, y)
注意，里面的x和y 不跟单位，直接写数字

四、移动端触屏事件

1. 触屏事件概述

移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

常见的触屏事件

2. 触屏事件对象（TouchEvent）

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

触摸列表

3. 移动端拖动元素

1. touchstart、touchmove、touchend 可以实现拖动元素
2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY
3. 移动端拖动的原理： 手指移动时，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
4. 手指移动的距离： 手指滑动过程中的位置 减去 手指刚开始触摸的位置
   拖动元素三步曲：
   （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置
   （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
   （3） 离开手指 touchend
   注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

4. click 延时解决方案

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。

解决方案：

1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。
   

2. 利用touch事件自己封装这个事件解决 300ms 延迟。

原理就是：
①当我们手指触摸屏幕，记录当前触摸时间
②当我们手指离开屏幕， 用离开的时间减去触摸的时间
③如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击

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

3. 使用插件。 fastclick 插件解决 300ms 延迟。