-
具體我來歸納下改良的技術(shù)方案與涉及到的知識點： 1.為了處理自適應(yīng)的問題，采用了新的rem布局代替百分比布局方案 2.采用了簡單的面相對象編程，采用類的形式對每一個頁面場景元素都做了一定的封裝 3.引入了Observer觀察者模式的處理機制 4.適當?shù)囊雜vg概念，通過svg繪制矢量圖 5.精靈動畫部分依舊大量采用了css3 animation動畫的steps關(guān)鍵幀，但是不同的是，解決了自適應(yīng)雪碧圖的問題 6.元素運動部分優(yōu)化了css3 transform transition的使用 7.新增了video視頻元素的運用 8.新增了3d旋轉(zhuǎn)木馬的效果實現(xiàn) 9.新增了canvas版的雪花實現(xiàn) 10.等等.............查看全部
-
1、animation-name:動畫名 2、animation-duration:時間 3、animation-delay:延時 4、animation-iteration-count:次數(shù) 5、animation-play-state:控制 6、animation-direction:方向 7、animation-fill-mode:狀態(tài) 8、animation-timing-function:關(guān)鍵幀變化查看全部
-
1、1rem=16px 2、var docEl = document.documentElement, //當設(shè)備的方向變化（設(shè)備橫向持或縱向持）此事件被觸發(fā)。綁定此事件時， //注意現(xiàn)在當瀏覽器不支持orientationChange事件的時候我們綁定了resize 事件。 //總來的來就是監(jiān)聽當然窗口的變化，一旦有變化就需要重新設(shè)置根字體的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //設(shè)置根字體大小 docEl.style.fontSize = ? }; //綁定瀏覽器縮放與加載時間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false);查看全部
-
SVG是基于xml標記語言可縮放矢量圖形，支持無損縮放的同時也因為是dom節(jié)點，所以也支持事件，但是弊端也很明顯，dom的數(shù)量非常大，復(fù)雜度高，渲染就比較慢了，也不適合游戲的開發(fā)，一般會用canvas之后會介紹 SVG有什么優(yōu)勢？ ?文件體積小，能夠被大量的壓縮 ?圖片可無限放大而不失真(矢量圖的基本特征) ?在視網(wǎng)膜顯示屏上效果極佳 ?能夠?qū)崿F(xiàn)互動和濾鏡效果查看全部
-
分頁布局，三個場景類通過接口去調(diào)用，創(chuàng)建一個中介對象，接口分配任務(wù)查看全部
-
布局 分頁查看全部
-
animation step查看全部
-
<script type="text/javascript"> var docEl = document.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //設(shè)置根字體大小 docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; }; //綁定瀏覽器縮放與加載時間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> 字體自適應(yīng)大小查看全部
-
timing-function 作用于每兩個關(guān)鍵幀之間，而不是整個動畫查看全部
-
rem是什么？ rem和em單位一樣，都是一個相對單位,不同的是em是相對于元素的父元素的font-size進行計算,rem是相對于根元素html的font-size進行計算,這樣一來rem就繞開了復(fù)雜的層級關(guān)系，實現(xiàn)了類似于em單位的功能。默認情況下瀏覽器給的字體大小是16px，按照轉(zhuǎn)化關(guān)系 16px = 1rem查看全部
-
【布局視口的尺寸】document.documentElement.clientWidth/Height（不包括滾動條） 【視覺視口的尺寸】window.innerWidth/Height（包括滾動條）查看全部
-
.cloudy { background: #60768D; border-radius: 50%; box-shadow: #60768D 1.2rem -0.2rem 0 -0.1rem, #60768D 0.5rem -0.5rem, #60768D 0.8rem 0.2rem,#60768D 1.5rem 0.2rem 0 -0.2rem; height: 1rem; width: 1rem; position: absolute; left: .5rem; top: 1.8rem; z-index: 5; -webkit-animation: cloudy 5s ease-in-out infinite; -moz-animation: cloudy 5s ease-in-out infinite; }查看全部
-
挺咯你查看全部
-
$("button:last").on("click", function() { // $.Deferred改造 function C() { var dtd = $.Deferred(); //創(chuàng)建 setTimeout(function() { dtd.resolve(3) }, 500) return dtd; } //模擬異步D function D(value) { var dtd = $.Deferred(); //創(chuàng)建 setTimeout(function() { dtd.resolve(value + 4) }, 500) return dtd; } //模擬E function E(value) { var dtd = $.Deferred(); //創(chuàng)建 setTimeout(function() { dtd.resolve(value + 5) }, 1000) return dtd; } C() .then(function(data) { return D(data) }) .then(function(data) { return E(data) }) .then(function(data) { $(".container").html("Deferred異步處理:" + data) }) })查看全部
-
ctx.fillStyle = "blue"; ctx.fillRect(10, 10, 190, 100);查看全部
舉報
0/150
提交
取消