-
具體我來(lái)歸納下改良的技術(shù)方案與涉及到的知識(shí)點(diǎn)： 1.為了處理自適應(yīng)的問(wèn)題，采用了新的rem布局代替百分比布局方案 2.采用了簡(jiǎn)單的面相對(duì)象編程，采用類(lèi)的形式對(duì)每一個(gè)頁(yè)面場(chǎng)景元素都做了一定的封裝 3.引入了Observer觀察者模式的處理機(jī)制 4.適當(dāng)?shù)囊雜vg概念，通過(guò)svg繪制矢量圖 5.精靈動(dòng)畫(huà)部分依舊大量采用了css3 animation動(dòng)畫(huà)的steps關(guān)鍵幀，但是不同的是，解決了自適應(yīng)雪碧圖的問(wèn)題 6.元素運(yùn)動(dòng)部分優(yōu)化了css3 transform transition的使用 7.新增了video視頻元素的運(yùn)用 8.新增了3d旋轉(zhuǎn)木馬的效果實(shí)現(xiàn) 9.新增了canvas版的雪花實(shí)現(xiàn) 10.等等.............查看全部
-
1、animation-name:動(dòng)畫(huà)名 2、animation-duration:時(shí)間 3、animation-delay:延時(shí) 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, //當(dāng)設(shè)備的方向變化（設(shè)備橫向持或縱向持）此事件被觸發(fā)。綁定此事件時(shí)， //注意現(xiàn)在當(dāng)瀏覽器不支持orientationChange事件的時(shí)候我們綁定了resize 事件。 //總來(lái)的來(lái)就是監(jiān)聽(tīng)當(dāng)然窗口的變化，一旦有變化就需要重新設(shè)置根字體的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //設(shè)置根字體大小 docEl.style.fontSize = ? }; //綁定瀏覽器縮放與加載時(shí)間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false);查看全部
-
SVG是基于xml標(biāo)記語(yǔ)言可縮放矢量圖形，支持無(wú)損縮放的同時(shí)也因?yàn)槭莇om節(jié)點(diǎn)，所以也支持事件，但是弊端也很明顯，dom的數(shù)量非常大，復(fù)雜度高，渲染就比較慢了，也不適合游戲的開(kāi)發(fā)，一般會(huì)用canvas之后會(huì)介紹 SVG有什么優(yōu)勢(shì)？ ?文件體積小，能夠被大量的壓縮 ?圖片可無(wú)限放大而不失真(矢量圖的基本特征) ?在視網(wǎng)膜顯示屏上效果極佳 ?能夠?qū)崿F(xiàn)互動(dòng)和濾鏡效果查看全部
-
分頁(yè)布局，三個(gè)場(chǎng)景類(lèi)通過(guò)接口去調(diào)用，創(chuàng)建一個(gè)中介對(duì)象，接口分配任務(wù)查看全部
-
布局 分頁(yè)查看全部
-
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'; }; //綁定瀏覽器縮放與加載時(shí)間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> 字體自適應(yīng)大小查看全部
-
timing-function 作用于每?jī)蓚€(gè)關(guān)鍵幀之間，而不是整個(gè)動(dòng)畫(huà)查看全部
-
rem是什么？ rem和em單位一樣，都是一個(gè)相對(duì)單位,不同的是em是相對(duì)于元素的父元素的font-size進(jìn)行計(jì)算,rem是相對(duì)于根元素html的font-size進(jìn)行計(jì)算,這樣一來(lái)rem就繞開(kāi)了復(fù)雜的層級(jí)關(guān)系，實(shí)現(xiàn)了類(lèi)似于em單位的功能。默認(rèn)情況下瀏覽器給的字體大小是16px，按照轉(zhuǎn)化關(guān)系 16px = 1rem查看全部
-
【布局視口的尺寸】document.documentElement.clientWidth/Height（不包括滾動(dòng)條） 【視覺(jué)視口的尺寸】window.innerWidth/Height（包括滾動(dòng)條）查看全部
-
.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);查看全部
舉報(bào)
0/150
提交
取消