-
/** * 切換頁(yè)面 * 模擬鏡頭效果 * @return {[type]} [description] */ function changePage(element, effect, callback) { element .addClass(effect) .one("animationend webkitAnimationEnd", function() { callback && callback(); }) } /** * 中間調(diào)用 */ var Christmas = function() { //頁(yè)面容器元素 var $pageA = $(".page-a"); var $pageB = $(".page-b"); var $pageC = $(".page-c"); //觀察者 var observer = new Observer(); //A場(chǎng)景頁(yè)面 new pageA(function() { observer.publish("completeA"); }) //進(jìn)入B場(chǎng)景 observer.subscribe("pageB", function() { new pageB(function() { observer.publish("completeB"); }) }) //進(jìn)入C場(chǎng)景 observer.subscribe("pageC", function() { new pageC() })查看全部
-
/** * 背景音樂(lè) * @param {[type]} url [description] * @param {[type]} loop [description] */ function HTML5Audio(url, loop) { var audio = new Audio(url); audio.autoplay = true; audio.loop = loop || false; //是否循環(huán) audio.play(); return { end: function(callback) { audio.addEventListener('ended', function() { callback() }, false); } } } $(function() { $("button:first").click(function() { //背景音樂(lè) var audio1 = HTML5Audio('http://idcbgp.cn/upload/media/one.mp3') audio1.end(function() { alert("音樂(lè)結(jié)束") }) }); $("button:last").click(function() { //循環(huán)播放那 var audio2 = HTML5Audio('http://idcbgp.cn/upload/media/two.mp3') audio2.end(function() { console.log('OK'); }) }) })查看全部
-
1. A(function(data1) {//data1=1 B(function(data2){ $(".container").html("嵌套異步:" + data2)//data2:1+2=3 }, data1)//data1=1 }) 2. C : resolve(3), 參數(shù)data 返回值是3， then 調(diào)用D(data), 因?yàn)閐.resolve(value+4) 返回值為：3+4=7; then調(diào)用E(data) e.resolved(value+5) 返回值為：7+5=12;查看全部
-
關(guān)鍵幀動(dòng)畫(huà)我們已經(jīng)實(shí)現(xiàn)了，那坐標(biāo)的變化就很簡(jiǎn)單了，一般來(lái)說(shuō)前端能用到的手段 元素.position定位，修改top,left坐標(biāo)修改 通過(guò)css3的transform屬性的translate 無(wú)論用那種需要記住的是元素的坐標(biāo) 都是 position+translate的值的總和 圣誕主題我采用的是transition+position的處理 transition是css3引入的"過(guò)渡"屬性，可以讓css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡，考慮兼容性問(wèn)題，這里會(huì)額外引入一個(gè)插件jquery.transit，這個(gè)就是具體封裝了transition的CSS3過(guò)渡動(dòng)畫(huà)的實(shí)現(xiàn)查看全部
-
1.父元素或者當(dāng)前運(yùn)動(dòng)元素上設(shè)置透視角perspective，perspective屬性的值決定了3D效果的強(qiáng)度 2.3D視圖，設(shè)置在父元素上，子元素都可以相對(duì)與父元素的平面上進(jìn)行3D變形操作查看全部
-
perspective(length)為一個(gè)元素設(shè)置三維透視的距離。僅作用于元素的后代，而不是元素的本身。查看全部
-
//瀏覽器的字體根據(jù)瀏覽窗口的大小而改變。 <script type="text/javascript"> 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 = 20 * (docEl.clientWidth / 320)+'px'; }; //綁定瀏覽器縮放與加載時(shí)間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script>查看全部
-
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，按照關(guān)系轉(zhuǎn)化16px=1rem。 自適應(yīng)處理 使用rem布局的時(shí)候，是兼容不同的分辨率，我們應(yīng)該要?jiǎng)討B(tài)修改根字體的大小，讓所有的用rem單位的子元素跟著一起縮放，從而達(dá)到自適應(yīng)的效果查看全部
-
知識(shí)點(diǎn)查看全部
-
知識(shí)點(diǎn)查看全部
-
這段自適應(yīng)大小rem很好查看全部
-
ctx.fillStyle ='blue'; ctx.fillRect(110,110,100,100);查看全部
-
<head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> section { width: 100%; height: 100%; background: red; } .page{ width: 5rem; height: 10rem; background: yellow; font-size: 0.3rem; } </style> </head> <body> <section> <div class="page">rem跟著html:font-size變化</div> </section> </body> <script type="text/javascript"> 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 =20*(docEl.clientwidth/320)+'px'; }; //綁定瀏覽器縮放與加載時(shí)間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script>查看全部
-
自適應(yīng)rem布局 rem是個(gè)低調(diào)的css單位，手淘在移動(dòng)端的布局是基于rem處理的，當(dāng)然還要基于viewport的處理，這里暫且不表。在我的上個(gè)七夕主題中采用的是流式布局( 使用 % 百分比定義寬度，高度大都是用px來(lái)固定住)。如果使用 em 或 rem 單位進(jìn)行相對(duì)布局，相對(duì) % 百分比更加靈活，同時(shí)可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示。 因?yàn)閑m是相對(duì)父級(jí)元素的原因 沒(méi)有得到推廣，圣誕主題采用rem布局單位 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 自適應(yīng)處理： 使用rem布局的時(shí)候,為了兼容不同的分辨率,我們應(yīng)該要?jiǎng)討B(tài)的修正根字體的大小,讓所有的用rem單位的子元素跟著一起縮放,從而達(dá)到自適應(yīng)的效果 參考右邊代碼區(qū)域，一般情況在項(xiàng)目的最前面加載一段js來(lái)修改html的font-size，針對(duì)不同分辨率計(jì)算font-size，監(jiān)聽(tīng)瀏覽器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; 給html設(shè)置fontSize大小，其實(shí)就是在DOMContentLoaded或者resize變化后調(diào)整fontSize的大小，從而調(diào)整rem的比值關(guān)系。慕課的布局是右邊區(qū)域展示，所以按照移動(dòng)端的320寬度為標(biāo)準(zhǔn)去做適配的，當(dāng)然基于這個(gè)縮放都是沒(méi)關(guān)系的 總結(jié)： 根據(jù)實(shí)際情況通過(guò)設(shè)計(jì)稿與當(dāng)前可視區(qū)的大小做一個(gè)比例關(guān)系，通過(guò)這個(gè)比例進(jìn)行縮放處理查看全部
-
16px=1rem查看全部
舉報(bào)
0/150
提交
取消