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