亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

<script src="

<script src="

頁面切換部分的代碼封裝

封裝，即隱藏對象的屬性和實現細節，僅對外公開接口。

封裝的目的是增強安全性和簡化編程，使用者不必了解具體的實現細節，而只是要通過外部接口，以特定的訪問權限來使用類的成員

這個主題案例，我采用的是面向接口編程的寫法，簡單的說就是將行為封裝分布在各個對象中，并讓這些對象自己各自負責自己的行為，這也是面向對象設計的一個優點

就拿頁面切換的效果來說，在某一時刻，元素A需要讓頁面進行切換，那么元素A不需要關心頁面是怎么切換的，它只能要調用到一個接口方法能讓頁面切換就行了

基于這樣的理論，我們就開始改造一下頁面切換的零碎的代碼塊

頁面布局與切換是一個整體，我們想調用切換的時候，并不關心其內部處理的手段，所以我們只需要提供一個可以調用的接口就可以，新建一個Swipe.js文件，內部定義一個Swipe工廠方法，內部會產生一個swipe的滑動對象，暴露了scrollTo的接口

JavaScript中沒有抽象類與接口的支持，所以很大程度上實現封裝都是靠閉包去模擬

具體我看看右邊代碼塊Swipe.js的實現 與index.html中調用

頁面之間的卷滾切換效果

頁面的橫向布局我們已經實現好了，那么如何實現頁面與頁面之間的切換呢？

一般來說要根據布局的結構來，大體有2種：

• 移動父容器，改變父容器的坐標

• 移動每一個子容器的坐標

顯而易見，移動父容器簡單很多，只需要改變父容器X軸的坐標就可以了。如果父容器中子元素有很多的話，那么我們會考慮第二種算法，可以做成動態加載，但是這種處理是超級麻煩，這里不討論

改變坐標的處理可以分為2種：

• 傳統的top,left坐標修改

• CSS3中的transform屬性

傳統的就是修改元素style是坐標屬性，這個沒什么好說的，使用簡單，一般都需要配合定時器使用。

CSS3引入了一個新的屬性Transform

transform 屬性向元素應用 2D 或 3D 轉換，該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。其中會有一個值translate3d(x,y,z) 是用來控制元素的位置在頁面上的三軸的位置的，translate3d這里指明了3d就是啟用了3d加速，也就是啟動GPU來處理，性能更強

過去，為了實現這種平滑的過渡效果，我們需要借助于Flash技術，現在只需要簡單的使用CSS3 Transition的方法就可以實現，這是一個簡單的動畫屬性

transition可以設置一些具體的參數，比如動畫執行的時間，變化的算法、動畫延時等等，具體大家可以搜索更細致的資料

這里需要特別注意的就是：

transform屬性是靜態屬性，不是動畫屬性，一旦寫到style里面，將會直接顯示作用，無任何變化過程

簡單的一句話描述就是

通過設置transition的一些參數，讓translate3d這個屬性發生變化

如何通過translate結合transition改變元素的頁面位置，我們具體看到右邊的代碼

通過點擊"點擊頁面開始切換"出現頁面切換的效果

頁面的橫向布局

本章正式進入七夕這個主題效果是如何實現的講解，首先回顧下視頻的內容：整個效果都是以小男孩走路為前提，在三個主題頁面中切換并在每個主題頁面中會有不同的效果呈現

我們可以這樣理解，效果上

• 頁面主題會滾動

• 小男孩會走動

通過二者的速率變化，可以讓用戶產生一個視覺上的錯覺，也可以稱為視覺差，感覺就是人物在不斷走路前行

從頁面的效果，考慮頁面整體布局結構應該需要這樣

• 頁面是一個橫向的

• 包含了3個主題頁面

• 頁面之間是無縫拼接的

• 頁面還要能滾動

布局上很好處理，我們做3個塊級元素，每一個塊元素代表一個主題頁面的容器節點。然后設置一個父容器是3個塊元素的寬，通過float處理，這樣就形成了一個橫向的3個無縫拼接的頁面

頁面布局結構如下

<ul?class='content-wrap'>?????<!--?第一副畫面?-->?????<li>?頁面1?</li>?????<!--?第二副畫面?-->?????<li>?頁面2?</li>?????<!--?第三副畫面?-->?????<li>?頁面3?</li>?</ul>

這樣雖然是形成了橫向布局與無縫拼接，不過可視區范圍永遠只能顯示出一個主題頁面的尺寸，所以我們需要再給祖先節點上套一個限制顯示區域的節點

在實現上，通過CSS布局是可以直接處理的。本課程中做了自適應頁面布局的處理，為了更精確頁面的尺寸，這里采用JavaScript動態計算絕對的尺寸

具體的實現我們參考右邊的代碼區域

h5+js+css

position與offset的取值不同點，.offset()是相對于文檔（document）的當前位置,.position()是相對于父級元素的位移，一個元素可以嵌套多個position所以這里要特別注意下

解讀一下樣式的slowWalk類定義規則：

封裝，即隱藏對象的屬性和實現細節，僅對外公開接口。

目的：增強安全性和簡化編程，沒必要了解具體的實現細節，只是要通過外部接口，一特定的訪問權限來使用類的成員。

transform屬性是靜態屬性，不是動畫屬性，一旦寫到style里面，將會直接顯示作用，無任何變化過程

通過設置transition的一些參數，讓translate3d這個屬性發生變化

小孩男走路是貫穿三個主題頁面，因此小男孩在布局上不能嵌入任何一個頁面內，否則無法切換到下一個頁面中了。所以最終小男孩的布局與頁面根節點屬于并列結構

小男孩的布局很簡單，但是要注意3個問題：

• 小男孩其實只會在當前頁面移動，所以是相對父級#content的范圍

• 小男孩的布局處理，因為小孩男是合成的"雪碧圖"，通過坐標取圖，因此不能用CSS處理自適應布局了，需要動態調整、

• 采用動畫的元素需要設置絕對定位

觀察效果會發現：小男孩總是會沿著中間那個路線走動。因為背景圖是靠百分比控制的，會隨著分辨率的變化而變化。但是人物是固定的尺寸是無法變化的（合成圖的關系），這里只能通過JS動態調整

元素的布局上，我都是保留的原尺寸，如果需要自適應，單獨可以用百分比控制，通過background-size 一般可以設置 100% 100%的方式平鋪元素，這樣設置后圖片就能自適應大小縮放了

https://github.com/Mqleaf/Practice-in-IMOOC/tree/master/0%20qixi

css動畫

animation和keyframes!!!!

transform