-
//通過$.Deferred()處理過的代碼,很明顯沒有了回調的嵌套,每一部分代碼都被封裝起來了,只留下Deferred的接口處理了. //這樣寫的好處是,如果我們以后寫嵌套函數,就可以用Deferred的管道風格來編寫同步代碼了 /* 步驟有三步: * 第一步: var dtd = $.Deferred(); //創建 * 第二步: dtd.resolve(參數); //成功所得值,即為參數 * 第三步: dtd.then(); //執行回調,并將dtd作為實參傳入then里面的函數; * */查看全部
-
start to learn查看全部
-
var dtd = $.Deferred(); //創建 dtd.resolve(); //成功 dtd.then() //執行回調 具體的我們可以參考下jQuery的Deferred部分的API說明查看全部
-
rem布局查看全部
-
123查看全部
-
js，圣誕節視頻查看全部
-
總結：呈現3d效果需要3部分<br> <br> 設置一個元素的transform-style:preserve-3d；只影響這個元素的子元素(如果孫元素也有3d效果，那么還必須給子元素設置preserve-3d)。這樣所有子元素都可以相對與父元素的平面進行3d變形操作 父元素或者當前運動元素上設置透視角perspective，perspective屬性的值決定了3D效果的強度<br> 3D視圖，設置在父元素上，子元素都可以相對與父元素的平面進行3d變形操作<br> 3D變形函數，translate3d、scale3d、rotateX、rotateY、rotateZ等等查看全部
-
自適應布局單位 如果使用【 em 或 rem 單位】進行相對布局，相對 % 百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示。 因為em是【相對父級元素的原因】 沒有得到推廣。 根據分辨率自動調整瀏覽器默認字體大小 【rem是相對于根元素html的font-size進行計算的】<br> var docEl = document.documentElement,<br> //當設備的方向變化（設備橫向持或縱向持）此事件被觸發。綁定此事件時，<br> //注意現在當瀏覽器不支持orientationChange事件的時候我們綁定了resize 事件。<br> //總來的來就是監聽當然窗口的變化，一旦有變化就需要重新設置根字體的值<br> resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',<br> recalc = function() {<br> //設置根字體大小<br> docEl.style.fontSize =20 * (docEl.clientWidth / 320) + 'px';<br> };<br> <br> //綁定瀏覽器縮放與加載時間<br> window.addEventListener(resizeEvt, recalc, false);<br> document.addEventListener('DOMContentLoaded', recalc, false)查看全部
-
545查看全部
-
asdf查看全部
-
132查看全部
-
123查看全部
-
@-webkit-keyframes bird-slow { 0% { background-position: -0px 0px; } 100% { background-position: -273px 0px; } } @-moz-keyframes bird-slow { 0% { background-position: -182px 0px; } 50% { background-position: 0px 0px; } 75% { background-position: -91px 0px; } 100% { background-position: -182px 0px; } }查看全部
-
如果實現3張圖幀動畫效果，代碼如下 animation:bird-slow 400ms steps(3) infinite; @keyframes bird-slow { 0% {background-position-x: -0px} 100% {background-position-x: -273px} } 通過定義一個類，類中定義的動畫的一些關鍵數據，比如動畫名，時間，次數，切換的位置 通過keyframes定義動畫具體執行參數與時間段 steps(3)的意思就是：keyframes設置的0%-100%的段中，background-position的的x坐標會變化3次 steps會平分這些段落值，其變化值就是 background-position-x: -0px background-position-x: -91px background-position-x: -182px 為什么沒有-273px，這個是steps的具體一個算法查看全部
-
CSS3的Animation有八個屬性 animation-name ：動畫名 animation-duration：時間 animation-delay：延時 animation-iteration-count：次數 animation-direction：方向 animation-play-state：控制 animation-fill-mode：狀態 animation-timing-function：關鍵幀變化 8個屬性中，其中1-7都有相關介紹，但是animation-timing-function是控制時間的屬性，在取值中除了常用到的 三次貝塞爾曲線 以外，還有個很高級的 steps() 函數，steps函數也就是整個圣誕主題的關鍵知識點。steps要配合精靈圖使用，簡單來說就是用來切換多個精靈圖的，形成幀動畫，類似setTimeout的處理感覺查看全部
舉報
0/150
提交
取消