Web API （scroll系列）、（仿淘寶側邊欄效果實現）、（mouseenter與mouseover的區別）、（動畫的原理）、（緩動動畫）

一 、三大系列中的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 + 盒子當前的位置 ， 就是最後要設置給盒子的偏移量  ；