-
var slides = element.find(">");與var slides = element.find("li");的區別。查看全部
-
這里的取值采用jQuery的offset處理的，注意下position與offset的取值不同點，.offset()是相對于文檔（document）的當前位置,.position()是相對于父級元素的位移，一個元素可以嵌套多個position所以這里要特別注意下。查看全部
-
element.css({ transition: 'transform 5000ms linear', transform: 'translateX(-' + (width * 2) + 'px)' //設置頁面X軸移動 }); });查看全部
-
轉換，動畫，音頻，查看全部
-
頁面切換部分的代碼封裝查看全部
-
頁面之間的卷滾切換效果查看全部
-
整個效果都是以小男孩走路為前提，在三個主題頁面中切換并在每個主題頁面中會有不同的效果呈現 我們可以這樣理解，效果上 頁面主題會滾動 小男孩會走動 通過二者的速率變化，可以讓用戶產生一個視覺上的錯覺，也可以稱為視覺差，感覺就是人物在不斷走路前行 從頁面的效果，考慮頁面整體布局結構應該需要這樣 頁面是一個橫向的 包含了3個主題頁面 頁面之間是無縫拼接的 頁面還要能滾動 布局上很好處理，我們做3個塊級元素，每一個塊元素代表一個主題頁面的容器節點。然后設置一個父容器是3個塊元素的寬，通過float處理，這樣就形成了一個橫向的3個無縫拼接的頁面查看全部
-
這樣人才會站在圖中的路上$boy.css({ top: pathY - boyHeight + 25 });查看全部
-
鳥動畫的實現 飛鳥動畫也跟小男孩動畫一樣，通過精靈與transition的組合實現 在頁面增加一個鳥的HTML結構 <div class="bird"></div> CSS布局比較簡單，通過background-position加載精靈圖，做動畫的元素都是需要設置position：absolute這樣才能獨立漂浮文檔流，讓頁面的重繪更少 圖片變化部分采用的是CSS3的animation，通過設置animation-timing-function: step-start;馬上跳到動畫每一幀結束的狀態，這樣就讓動畫執行一幀一幀的切換效果 @-webkit-keyframes bird-slow { 0% { background-position: -182px 0px; } 50% {background-position: 0px 0px;} 75% {background-position: -91px 0px;} 100% {background-position: -182px 0px;} } 以上是4個變化點，但是實際上我們只有3張圖，0% 100%是最后一幀，這是因為設置step-start了的緣故，注意下這個寫法就可以了 移動部分就很簡單，我們移動left或者right的值，距離就是一個頁面單位，注意下正負取值 具體的實現，可以參考下源碼部分查看全部
-
注意下position與offset的取值不同點，.offset()是相對于文檔（document）的當前位置,.position()是相對于父級元素的位移，一個元素可以嵌套多個position所以這里要特別注意下。scale是一個縮放效果查看全部
-
小男孩部分代碼的封裝 前端充斥著大量的異步操作，動畫就是異步的邏輯，七夕主題的整個設計都是以小男孩走路為主線。在走到不同的路段就會有不同的操作，走路是通過CSS3的transition與animation結合完成的，所以針對這類異步的處理我采用了jQuery的Deferred封裝起來。 除此之外，在整個結構中都是采用面向接口編程，簡單的說就是將行為分布在各個對象中，并讓這些對象自己各自負責自己的行為。那么小孩男的整個行為邏輯我都將會封裝成一個獨立的對象，通過接口調用 說了半天，我們看右邊的代碼最直接，我單獨用了個BoyWalk.js把小男孩的動作給封裝了起來，暴露了walkTo、stopWalk、setColoer三個接口，提供給外部調用。 接口的命名與數量是需要根據具體的業務邏輯的需要，隨著人物的動作變化的增加，接口也會增加 以小男孩走路為變化，不同的路段有不同的速率與距離，所以會提供一個走路的walkTo接口給外部。在第三章的時候我把走路動作的一些細節與實現都分解了一遍，這里主要看下怎么融入Deferred的處理 index.html中的代碼調用，可以這樣理解： 生成一個小男孩對象 開始走路，2秒走到頁面的20%的距離 完成了設置一個顏色效果 繼續走路，走到40%的區域 完成了設置一個顏色效果 繼續走路，走到60%的區域 完成了設置一個顏色效果 通過加入Deferred的處理，讓我們的流程就跟同步一樣，這件事完成了就開始下一件事,非常合適人類的線性編程的邏輯，之后的整個流程都會基于then的方式書寫查看全部
-
運動的狀態控制 通過CSS3的animation與transition的結合實現了人物的走路的效果。一般來說運動的狀態都是需要可控的，這樣才方便我們做進一步的操作。 animation的暫停方式 CSS3的animation直接提供一個animation-play-state的樣式來控制動畫的暫停處理。增加一個控制暫停樣式，寫動畫樣式的時候特別注意下不同瀏覽器的兼容性，加上對應的前綴 .pauseWalk { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; } 只需要在對應的有animation動畫人物元素節點上，通過動態增加刪除這個樣式就可以控制這個精靈的開始與暫停了，非常簡單 transition的暫停方式 至于transition，一般來說要暫停的地方都是一開始就程序設定好的目標點，因此這個其實是不需要控制的，這個也沒辦法控制，這個是一個動畫過渡的效果，瀏覽器只提供了一個動畫結束的回調。當然可以有一個變通的辦法，做一個強制改變目標過渡值的處理 如何操作： 具體可以看右邊的代碼塊，暫停方法內transition強制做了一個設置left坐標的處理，達到一個暫停的效果，但是這樣是有問題的，下一次的啟動必須等上一次動畫的時間結束 不難看出animation要比transition強大多了查看全部
-
transition與animation用的很多，這里簡單的描述下不同點，transition需要事件觸發，animation可以直接自動觸發，而且功能上更為強大，包括可以設置不同時間段的動畫規則，還有狀態的控制，事件等等。查看全部
-
頁面切換部分的代碼封裝 封裝，即隱藏對象的屬性和實現細節，僅對外公開接口。 封裝的目的是增強安全性和簡化編程，使用者不必了解具體的實現細節，而只是要通過外部接口，以特定的訪問權限來使用類的成員 這個主題案例，我采用的是面向接口編程的寫法，簡單的說就是將行為封裝分布在各個對象中，并讓這些對象自己各自負責自己的行為，這也是面向對象設計的一個優點 就拿頁面切換的效果來說，在某一時刻，元素A需要讓頁面進行切換，那么元素A不需要關心頁面是怎么切換的，它只能要調用到一個接口方法能讓頁面切換就行了 基于這樣的理論，我們就開始改造一下頁面切換的零碎的代碼塊 頁面布局與切換是一個整體，我們想調用切換的時候，并不關心其內部處理的手段，所以我們只需要提供一個可以調用的接口就可以，新建一個Swipe.js文件，內部定義一個Swipe工廠方法，內部會產生一個swipe的滑動對象，暴露了scrollTo的接口 JavaScript中沒有抽象類與接口的支持，所以很大程度上實現封裝都是靠閉包去模擬 具體我看看右邊代碼塊Swipe.js的實現 與index.html中調用查看全部
-
position與offset的取值不同點，.offset()是相對于文檔（document）的當前位置,.position()是相對于父級元素的位移查看全部
舉報
0/150
提交
取消