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