js开发实例 —— 返回顶部&筋斗云效果

二十六、返回顶部

滚动窗口至文档中的特定位置。

window.scroll(x, y)

①带有动画的返回顶部

②此时可以继续使用我们封装的动画函数

③只需要把所有的left相关的值改为跟页面垂直滚动距离相关就可以了

④页面滚动了多少,可以通过window.pageYoffset得到

⑤最后是页面滚动,使用windowscrollx,y)

二十七、筋斗云效果

鼠标经过某个小i ,筋斗云跟这到当前小i位置

鼠标离开这个小i ,筋斗云复原为原来的位置

鼠标点击了某个小li，筋斗云就会留在点击这个小i的位置

思路：

①利用动画函数做动画效果

②原先筋斗云的起始位置是0

③鼠标经过某个小i，把当前小i的offsetLeft位置做为目标值即可

④鼠标离开某个小i。就把目标值设为0

⑤如果点击了某个小i，就把li当前的位置存储起来,做为筋斗云的起始位置

JS 代码：