Web API （scroll系列）、（仿淘宝侧边栏效果实现）、（mouseenter与mouseover的区别）、（动画的原理）、（缓动动画）
2021-02-02 06:15
标签：区域 var scrolltop str ext banner 淘宝 fse ali 一 、三大系列中的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 + 盒子当前的位置 ， 就是最后要设置给盒子的偏移量 ； Web API （scroll系列）、（仿淘宝侧边栏效果实现）、（mouseenter与mouseover的区别）、（动画的原理）、（缓动动画） 标签：区域 var scrolltop str ext banner 淘宝 fse ali 原文地址：https://www.cnblogs.com/piyangtao/p/11562157.html
下一篇：BAPI 注意事项
文章标题：Web API （scroll系列）、（仿淘宝侧边栏效果实现）、（mouseenter与mouseover的区别）、（动画的原理）、（缓动动画）
文章链接：http://soscw.com/essay/49841.html