Web API （scroll系列）（仿淘宝侧边栏效果实现）（mouseenter与mouseover的区别）（动画的原理）（缓动动画）

Posted 2022-11-16 piyangtao

一 、三大系列中的scroll系列 ：

（1）scrollLeft |  scrollTop  ；水平   |   垂直方向滚动出去的距离  ；

（2）scrollWidth |  scrollHeight   ；内容的真是宽度  |  高度   ；

（3）滚动整个页面的时候  ：   window . pageYOffset   ； 

二 、仿淘宝侧边栏效果实现 ：

1.  找到关心的元素对象  ：

（1）banner区域  元素对象  ；

（2）侧边栏的元素对象   ；

（3）主体部分元素对象  ；

2.获取banner区域以及主体部分距离顶部的距离   offsetTop

3.给document注册scoll滚动事件  ;

(1)通过window.pageYOffset  来拿到滚动出去的距离 ；

(2)判断这个滚动出去的距离是否大于等于banner元素距离顶部的距离  ；

　　　a ：如果大于等于 ，让侧边栏修改定位模式为fixed 同时修正一下 top 的偏移量  ；

　　　b ：如果小于 ，让侧边栏修改定位模式为absolute ，修正一下top的偏移量  ；

(3)判断这个滚动出去的距离是否大于等于main元素距离顶部的距离  ；

　　　a ：如果大于等于 ，需要让文本进行显示 ；

　　　b ：如果小于 ，需要让文本进行隐藏  ；

 

三 、mouseenter 与 mouseover的区别 ：

（1）mouseenter 不会进行事件冒泡  ；

（2）mouseover   会进行事件冒泡  ；

 

四 、动画的原理 ：

（1）利用定时器setlnterval ，在定时器函数中 ，先获取到当前盒子的位置 ，

　　　然后加上移动的距离 ，最后把这个值设置给当前元素的偏移量就好  。

 

 

五 、缓动动画 ：

（1）非匀速动画  ；

（2）公式来实现  ：

　　　　　　a：var step = （目标位置 - 当前盒子的位置）/ 10  ；

　　　　　　b：把这个step + 盒子当前的位置 ， 就是最后要设置给盒子的偏移量  ；