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