-
@查看全部
-
$Deferred處理也就是先創建一個deferred對象，然后返回該對象，以便后面鏈式調用，就像一個掛鉤把所有的調用接在一根線上。 function animate1() { var dtd = $.Deferred(); // 生成Deferred對象 $("#block3").animate({ width: "50%" }, 2000, function() { dtd.resolve(); // 改變Deferred對象的執行狀態 }); return dtd; }查看全部
-
h5+js+css3實現七夕言情。 這個就是整體框架 如何實現動畫？？ 用不同手段實現的動畫 應該注意哪些問題？？ 動畫與動畫之間產生的異步 怎樣梳理代碼流程查看全部
-
視覺差表現頁面滾動和小男孩走動查看全部
-
路徑動畫就是你想某個東西按照你預想的路徑來運動。比如說一片樹葉從樹上落下來，具體要怎樣落下來，你就可以畫一條線作為路徑，讓樹葉沿著線落下來，這就是路徑動畫。查看全部
-
我喜歡查看全部
-
CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合并技術，該方法是將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。 原理： CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽。 一個簡單的例子： 一張圖片作出一個按鈕的三個狀態 一個鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態，a:link，a:hover，a:active。 <a class="button" href="#">鏈接</a> 加入右側的圖片為：200px×65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、鼠標滑過、鼠標點擊的狀態。則可以使用CSS進行定義。 a { display:block; width:200px; height:65px; line-height:65px; /*定義狀態*/ text-indent:-2015px; /*隱藏文字*/ background-image:url(button.png); /*定義背景圖片*/ background-position:0 0; /*定義鏈接的普通狀態，此時圖像顯示的是頂上的部分*/} a:hover {background-position:0 -66px; /*定義鏈接的滑過狀態，此時顯示的為中間部分，向下取負值*/} a:active {background-position:0 -132px; /*定義鏈接的普通狀態，此時顯示的是底部的部分，向下取負值*/} 而更多的CSS雪碧，圖片更復雜，背景定位更精確?？赡軙玫酱罅康臄抵担纾篵ackground:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位。查看全部
-
通過$.Deferred處理過的代碼，很明顯沒有了回調的嵌套，雖然代碼量看起來多了點，但是實際上，每一個代碼執行部分都被封裝了起來，只留了Deferred的接口處理了，等于是我們把執行的流程控制交給了Deferred，這樣的好處就是我們在寫嵌套函數的時候，可以用deferred提供的管道風格編寫同步代碼了查看全部
-
Promise 是一種令代碼異步行為更加優雅的抽象，有了它，我們就可以像寫同步代碼一樣去寫異步代碼。這個東東看起來很復雜，實際上我們只要抓住核心的使用就可以了查看全部
-
哈哈哈哈查看全部
-
transform 改變坐標的處理可以分為2種： 傳統的top,left坐標修改 CSS3中的transform屬性 傳統的就是修改元素style是坐標屬性，這個沒什么好說的，使用簡單，一般都需要配合定時器使用。 CSS3引入了一個新的屬性Transform transform 屬性向元素應用 2D 或 3D 轉換，該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。其中會有一個值translate3d(x,y,z) 是用來控制元素的位置在頁面上的三軸的位置的，translate3d這里指明了3d就是啟用了3d加速，也就是啟動GPU來處理，性能更強 過去，為了實現這種平滑的過渡效果，我們需要借助于Flash技術，現在只需要簡單的使用CSS3 Transition的方法就可以實現，這是一個簡單的動畫屬性 transition可以設置一些具體的參數，比如動畫執行的時間，變化的算法、動畫延時等等，具體大家可以搜索更細致的資料查看全部
-
通過溢出隱藏多余的頁面 hidden查看全部
-
$('button:last').click(function() { function animate1() { var dtd = $.Deferred(); // 生成Deferred對象 $("#block3").animate({ width: "50%" }, 2000, function() { dtd.resolve(); // 改變Deferred對象的執行狀態 }); return dtd; } function animate2() { var dtd = $.Deferred(); // 生成Deferred對象 $("#block4").animate({ width: "50%" }, 2000, function() { dtd.resolve(); // 改變Deferred對象的執行狀態 }); return dtd; } var anim = animate1(); anim.then(function() { $("#block3").text('block3動畫動畫直接結束'); return animate2(); }).then(function() { $("#block4").text('block4動畫動畫直接結束'); }); });查看全部
-
通過$.Deferred處理過的代碼，很明顯沒有了回調的嵌套，雖然代碼量看起來多了點，但是實際上，每一個代碼執行部分都被封裝了起來，只留了Deferred的接口處理了，等于是我們把執行的流程控制交給了Deferred，這樣的好處就是我們在寫嵌套函數的時候，可以用deferred提供的管道風格編寫同步代碼了 dtd.then(function() { //操作1 }).then(function() { //操作2 }).then(function() { //操作3 }) 這里要了解3個步驟 var dtd = $.Deferred(); //創建 dtd.resolve(); //成功 dtd.then() //執行回調 例子： $('button:last').click(function() { function animate1() { var dtd = $.Deferred(); // 生成Deferred對象 $("#block3").animate({ width: "50%" }, 2000, function() { dtd.resolve(); // 改變Deferred對象的執行狀態 }); return dtd; } var anim = animate1(); anim.then(function() { $("#block3").text('block3動畫動畫直接結束'); return animate2(); }).then(function() { $("#block4").text('block4動畫動畫直接結束'); }); });查看全部
-
前端充斥著大量的異步操作，動畫就是異步的邏輯，七夕主題的整個設計都是以小男孩走路為主線。在走到不同的路段就會有不同的操作，走路是通過CSS3的transition與animation結合完成的，所以針對這類異步的處理我采用了jQuery的Deferred封裝起來。查看全部
舉報
0/150
提交
取消