本章正式進入七夕這個主題效果是如何實現的講解，首先回顧下視頻的內容：整個效果都是以小男孩走路為前提，在三個主題頁面中切換并在每個主題頁面中會有不同的效果呈現
我們可以這樣理解，效果上
通過二者的速率變化，可以讓用戶產生一個視覺上的錯覺，也可以稱為視覺差，感覺就是人物在不斷走路前行
從頁面的效果，考慮頁面整體布局結構應該需要這樣
布局上很好處理，我們做3個塊級元素，每一個塊元素代表一個主題頁面的容器節點。然后設置一個父容器是3個塊元素的寬，通過float處理，這樣就形成了一個橫向的3個無縫拼接的頁面
頁面布局結構如下
<ul class='content-wrap'>
<!-- 第一副畫面 -->
<li> 頁面1 </li>
<!-- 第二副畫面 -->
<li> 頁面2 </li>
<!-- 第三副畫面 -->
<li> 頁面3 </li>
</ul>
這樣雖然是形成了橫向布局與無縫拼接，不過可視區范圍永遠只能顯示出一個主題頁面的尺寸，所以我們需要再給祖先節點上套一個限制顯示區域的節點
在實現上，通過CSS布局是可以直接處理的。本課程中做了自適應頁面布局的處理，為了更精確頁面的尺寸，這里采用JavaScript動態計算絕對的尺寸
具體的實現我們參考右邊的代碼區域
打開index.html文件，在代碼的24行填入相應代碼，通過溢出隱藏多余的頁面
hidden
在80行填入相應代碼，通過JS動態設置每一個元素的尺寸
slide.css({
width : width + 'px',
height : height + 'px'
});
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報