用原生实现js描点动画和改进思路以及高亮当前topbar的元素

描点动画

---

思路一

采用setInterval制作缓动

1. 设置次数n，一共动多少次
2. 规定时间s(毫秒)，算出多少毫秒动一次 s/n=time
3. 获取当前距离页面顶部高度currtenTop=window.scrollY
4. 获取目标div的高度targetTop(上一节已说明)
5. 每一次要动多少px：(targetTop-currttop)/n
6. 然后设置动画,当i===25时，清除掉这个时钟，每次的距离=最初的currentTop+distance*i , time是每隔多少时间循环一次

• 动画时间固定，导致如果距离很短，动的很慢，如果距离很长，则动的很快

思路二

采用tween.js库

1. tween.js提供了一系列缓动函数，详细的动画效果见http://easings.net/zh-cn
2. 首先我们引入js库 采用cdn方式引入
3. 拷贝文本代码
4. 根据具体情况修改代码，设置缓动类型，开始距离currentTop=window.scollY(滚动条滚动的距离)，目标距离targetTop=element.offsetTop（目标dom距离页面顶端的距离），element是我们获取到的目标dom，时间我们设置一个函数与运动距离成正比,time=(s/100)*300，随后设置一个最大时间，coords.y我们console出来，发现这是一个时时更新的坐标,所以我们在其中填入 window.scrollTo(0, coords.y)

元素高亮

---

1. 标记我们的目标元素