本文用案例說明怎樣利用滑鼠滾輪控制全屏切換、遮罩動畫。來借鑑一下吧~
效果如下：
分析實現目標：
自適應全屏滑鼠滾輪控制切換圖片及文字的動畫
分析元素：
圖片、文字、背景在切換下一個頁面的時候，當前頁面的圖片、文字元素都有動畫，動畫結束後才切換到下一頁圖片有遮罩動畫文字有位移變化
步驟一：設置結構
根據以上分析，banner的結構如下：每個狀態裡存放每張banner的圖片、文字元素，這裡設置了4張banner
因為要根據瀏覽器大小自適應，所以將每個banner裡面的圖片和文字組合如「4（Group）」，一起定位，當然你也可以分別定位。
步驟二：放置元素
banner1隻有文字內容，就直接放置進去
banner2、banner3、banner4結構一樣的：圖片、文字、背景，文字是比較簡單的位移變化，但是圖片有動畫。其中圖片效果拆分底圖、遮罩、結果三個圖片如下：
這裡遮罩「B」處是透明的，周圍顏色必須跟banner背景色相同。
步驟三：實現全屏自適應
網頁加載時（OnPageLoad）或者banner加載時添加事件：
設置banner動態面板的寬=瀏覽器窗口的寬度、高=瀏覽器窗口的高度因為第一個頁面一開始就要打開，所以這裡就要設置好元素的位置，第一個頁面只有文字且居中，所以設置其位移x=窗口寬度/2-文字寬度/2、y=窗口高度/2-文字高度/2
步驟四：實現滾輪切換
1. 撐頁面高度並能滾動
頁面內容的高度大於窗口高度Window.height，所以需要增加頁面內容，這裡使用了一個熱區，因為它是透明的，不礙眼。設置它的位移讓它來撐起頁面的高度。
這個高度不一定非要Window.height*頁面數，如果是簡單的滾動切換，這樣設置是有用的，但是這裡切換時有很多動畫效果，所以跟頁面數沒有直接關係，只要高度讓滾動起來比較方便即可。
2. 設置banner面板始終固定在頂部
因為上面已經撐高了頁面，頁面會滾動，所以需要設置banner面板始終顯示
3. 滾動切換頁面