-
return (direction == "x" ? visualWidth : visualHeight) * proportion; 如果direction的值為x，則返回visualWidth*proportion；如果direction的值不為x，則返回visualHeight*proportion查看全部
-
var dtd = $.Deferred(); //創建 dtd.resolve(); //成功 dtd.then() //執行回調查看全部
-
link 是什么意思 scripe的外部導入查看全部
-
1 整個效果以小男孩走路為前提，在三個主題頁面中切換，在每個主題頁面中會有不同的效果呈現。通過二者的速率變化，可以讓用戶產生視覺差，感覺人物在不斷前行。 2 布局上，令3個塊級元素分別代表一個主題頁面的容器節點。然后設置一個父容器是3個塊元素的寬，通過float處理，這樣就形成了一個橫向的3個無縫拼接的頁面。 3 在形成橫向布局與無縫拼接后，需要令可視區范圍只能顯示出一個主題頁面的尺寸。所以我們需要再給祖先節點上套一個限制顯示區域的節點。 4 在實現上，通過CSS布局是可以直接處理的。本課程中做了自適應頁面布局的處理，為了更精確頁面的尺寸，這里采用JavaScript動態計算絕對的尺寸。查看全部
-
Transition作用是指定了某一個屬性（如width、left、transform等）在兩個值之間如何過渡，他包括transition-property、transition-duration、transition-timing-function、transition-delay等。 如果某一個元素指定了Transiton，那么當其某個屬性改變的時候就會按照Transition指定的方式進行過渡，動畫就這么產生了。 Animation也是通過指定某一個屬性（如width、left、transform等）在兩個值之間如何過渡來實現動畫的，與Transition不同的是，Animation可以通過keyframe顯式控制當前幀的屬性值，而Transition只能隱式來進行（不能指定每幀的屬性值），所以相對而言Animation的功能更加靈活。另外一個區別是Animation通過模擬屬性值改變來實現動畫，動畫結束之后元素的屬性沒有變化；而Transition確實改變了元素的屬性值，動畫結束之后元素的屬性發生了變化；這一點，這在實際應用中會產生很大的區別，也決定了二者各有春秋。 Animation模塊包括了animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-play-state等屬性。 其實說這么多，一句話就是：Transform和width、left一樣，定義了元素很多靜態樣式，只不過通過Transition和Animation指定如何改變不同的屬性值，才實現了動畫。查看全部
-
animation 屬性是一個簡寫屬性，用于設置六個動畫屬性： animation-name animation-duration animation-timing-function （step方法：老師博客 http://www.cnblogs.com/aaronjs/p/4642015.html） animation-delay animation-iteration-count animation-direction 注釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。 animation-name 規定需要綁定到選擇器的 keyframe 名稱。。 animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。 animation-timing-function 規定動畫的速度曲線。 animation-delay 規定在動畫開始之前的延遲。 animation-iteration-count 規定動畫應該播放的次數。 animation-direction 規定是否應該輪流反向播放動畫。查看全部
-
通過 @keyframes 規則，您能夠創建動畫。 創建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。 在動畫過程中，您能夠多次改變這套 CSS 樣式。 以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價于 0% 和 100%。 0% 是動畫的開始時間，100% 動畫的結束時間。 為了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。 注釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。查看全部
-
jQuery 遍歷 - find() 方法 find() 方法獲得當前元素集合中每個元素的后代，通過選擇器、jQuery 對象或元素來篩選。 .find() 方法第一個明顯特征是，其接受的選擇器表達式與我們向 $() 函數傳遞的表達式的類型相同。將通過測試這些元素是否匹配該表達式來對元素進行過濾。查看全部
-
jQuery :eq() 選擇器 :eq() 選擇器選取帶有指定 index 值的元素。 index 值從 0 開始，所有第一個元素的 index 值是 0（不是 1）。查看全部
-
這里大體的總結下 自適應分辨率的問題可以采用的是JS+百分比布局處理 通過合成"雪碧圖"解決圖片加載與資源占用的問題 通過CSS3的animation實現幀動畫，并且可以控制狀態 布局除了left.top布局外，還可以使用最新的css3的transform處理 元素的變化，可以通過設置translate3d啟動GPU加速 可以用CSS3的transition做漸變動畫 HTML5音頻的使用 采用promise可以解決異步編程的邏輯嵌套問題 代碼組織的一些思路查看全部
-
背景音樂很簡單，可以直接用HTML5的audio元素播放。在HTML5標準網頁里面，我們可以運用audio標簽來完成我們對聲音的調用及播放。 使用： var audio = new Audio(url); //創建一個音頻對象并傳入地址 audio.loop = loop || false; //是否循環 audio.play(); //開始播放 傳遞一個視頻的地址，創建一個Audio對象，設置屬性loop是否循環播放，然后調用play方法就可以實現播放了查看全部
-
星星部分： 布局上來說沒什么難點，一共有6個div元素，背景都是同一張圖片，通過left與top修改每一個div的坐標點。唯一的動畫就是閃爍，實現上有3種手段 傳統的做法就是通過多張圖交替的改變 可以通過transition過渡做漸變的動畫 通過animation過漸變動畫 水波部分： 布局上4個div元素并且每個元素賦予不同的圖片，同樣的也是通過absolute定位，top與left賦予坐標。水波的動作也是很簡單，就是兩邊不斷的移動，實現上也有很多方式 通過定時器不斷的修改left的值 通過transition處理 通過animation處理 區別transition與animation的使用 transition與animation用的很多，這里簡單的描述下不同點，transition需要事件觸發，animation可以直接自動觸發，而且功能上更為強大，包括可以設置不同時間段的動畫規則，還有狀態的控制，事件等等。 星星與水波動畫有個共同的特點 不需要手動觸發 不斷的循環變化 所以針對這個相同點，最終采用了最簡單的animation處理。 星星來說可以增加一個opacity變化的的關鍵幀，1到0重復變化就能達到一個閃爍的效果，水波可以設定translateX變化的值，可以實現左右晃動的效果。需要注意的是，每一個元素的動畫執行會有個先后循序，所以需給每一個元素分別單獨設置animation-delay延時這個屬性。查看全部
-
轉換 動畫 音頻 漸變查看全部
-
鳥動畫： 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的值，距離就是一個頁面單位，注意下正負取值查看全部
-
//取花 function talkFlower() { //增加延時等待效果 var defer = $.Deferred(); setTimeout(function() { //取花 $boy.addClass('slowFlolerWalk') defer.resolve() }, 1000) return defer } talkFlower方法混入了Deferred對象，內部通過定時器模擬等待時間1秒，在等待一秒鐘之后，增加一個新的樣式slowFlolerWalk 具體參考右邊的代碼塊：boy.talkFlower()方法是介于toShop與outShop之間的，這樣符合了同步編程的邏輯查看全部
舉報
0/150
提交
取消