动画效果

• 动画效果
  • 三个家族
    • 作用：获取元素真实的位置或者宽高
    • offset家族
      • 成员
        • offsetWidth/offsetHeight
          • 与点语法获取元素属性的区别
            • 点语法获取元素属性的特点
              • 1.只能获取行内属性，无法获取行外属性，如果行内属性不存在 获取到的是空字符串
              • 2.获取到的属性是string类型的数据 而且带单位
              • 3.获取刀的只是我们再行内设置的width和height的值，（我们行内属性写多少获取到的就是多少
              • 点语法可以获取，也可以设置
            • offset获取元素属性的特点
              • 1.可以获取行内属性，也可以获取行外属性
              • 2.获取的属性值是number类型，而且不带单位
              • 3.获取的是页面显示的元素的真实宽高（width/height + padding + border)
                offsetParent
          • 特点
            • 1.如果元素自身是固定定位，那么获取到的定位父级是null
            • 2.如果元素自身不是固定定位（absolute relative） 那么就往上级找父级定位，如果所以的父元素都没有定位，那么找到的定位父级是body
            • 3.body的定位父级是null
        • offsetLeft /offsetTop
          • 获取特点
            • 获取元素在页面的真实位置
              • offsetTop : 获取到的是元素上外边框到定位父级（offsetParent）上内边框的距离
              • offsetTop : 获取到的是元素上外边框到定位父级（offsetParent）上内边框的距离
    • scroll家族
      • 子主题 scroll指滚动，包括这个元素没显示出来的实际宽度，包括padding，不包括滚动条、border
      • 成员
        • scrollHeight 获取对象的滚动高度，对象的实际高度；
        • scrollWidth 获取对象的滚动宽度
        • scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
        • scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
    • client家族
      • client指元素本身的可视内容，不包括overflow被折叠起来的部分，不包括滚动条、border，包括padding
      • 成员
        • clientWidth 对象可见的宽度，不包括滚动条等边线，会随窗口的显示大小改变
        • clientHeight 对象可见的高度
        • clientTop、clientLeft 这两个返回的是元素周围边框的厚度，一般它的值就是0。因为滚动条不会出现在顶部或者左侧
  • 动画封装
    • 1.代码冗余 ---- 函数封装
    • 2.移动距离不一样 ---- 传参解决
    • 3.多个元素无法同时移动 ---- 传参
      • 出现问题 ：多个元素无法同时移动
      • 分析问题：
        • 页面只有一个timeID 只能保存一个定时器（一份timeID,限制了页面只能有一个定时器）
      • 解决问题：
        • 给页面元素添加属性的方法，将timeID保存到元素中
    • 4.移动方向的问题
      • 出现问题：元素只能从左向右移动有动画，从右向左没有
      • 分析问题：
        • 从左向右，offsetLeft < 目标距离 offsetLeft增加
        • 从右向左，offsetLeft > 目标距离 offsetLeft减少
      • 解决问题：
        • 做方向判断