-
/** * 切換頁面 * 模擬鏡頭效果 * @return {[type]} [description] */ function changePage(element, effect, callback) { element .addClass(effect) .one("animationend webkitAnimationEnd", function() { callback && callback(); }) } /** * 中間調用 */ var Christmas = function() { //頁面容器元素 var $pageA = $(".page-a"); var $pageB = $(".page-b"); var $pageC = $(".page-c"); //觀察者 var observer = new Observer(); //A場景頁面 new pageA(function() { observer.publish("completeA"); }) //進入B場景 observer.subscribe("pageB", function() { new pageB(function() { observer.publish("completeB"); }) }) //進入C場景 observer.subscribe("pageC", function() { new pageC() })查看全部
-
/** * 背景音樂 * @param {[type]} url [description] * @param {[type]} loop [description] */ function HTML5Audio(url, loop) { var audio = new Audio(url); audio.autoplay = true; audio.loop = loop || false; //是否循環 audio.play(); return { end: function(callback) { audio.addEventListener('ended', function() { callback() }, false); } } } $(function() { $("button:first").click(function() { //背景音樂 var audio1 = HTML5Audio('http://www.xianlaiwan.cn/upload/media/one.mp3') audio1.end(function() { alert("音樂結束") }) }); $("button:last").click(function() { //循環播放那 var audio2 = HTML5Audio('http://www.xianlaiwan.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), 參數data 返回值是3， then 調用D(data), 因為d.resolve(value+4) 返回值為：3+4=7; then調用E(data) e.resolved(value+5) 返回值為：7+5=12;查看全部
-
關鍵幀動畫我們已經實現了，那坐標的變化就很簡單了，一般來說前端能用到的手段 元素.position定位，修改top,left坐標修改 通過css3的transform屬性的translate 無論用那種需要記住的是元素的坐標 都是 position+translate的值的總和 圣誕主題我采用的是transition+position的處理 transition是css3引入的"過渡"屬性，可以讓css的屬性值在一定的時間區間內平滑地過渡，考慮兼容性問題，這里會額外引入一個插件jquery.transit，這個就是具體封裝了transition的CSS3過渡動畫的實現查看全部
-
1.父元素或者當前運動元素上設置透視角perspective，perspective屬性的值決定了3D效果的強度 2.3D視圖，設置在父元素上，子元素都可以相對與父元素的平面上進行3D變形操作查看全部
-
perspective(length)為一個元素設置三維透視的距離。僅作用于元素的后代，而不是元素的本身。查看全部
-
//瀏覽器的字體根據瀏覽窗口的大小而改變。 <script type="text/javascript"> var docEl = document.documentElement, //當設備的方向變化（設備橫向持或縱向持）此事件被觸發。綁定此事件時， //注意現在當瀏覽器不支持orientationChange事件的時候我們綁定了resize 事件。 //總來的來就是監聽當然窗口的變化，一旦有變化就需要重新設置根字體的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //設置根字體大小 docEl.style.fontSize = 20 * (docEl.clientWidth / 320)+'px'; }; //綁定瀏覽器縮放與加載時間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script>查看全部
-
rem和em單位一樣，都是一個相對單位，不同的是em是相對于元素的父元素的font-size進行計算的，rem是相對于根元素html的font-size進行計算的，這樣一來rem就繞開了復雜的層級關系，實現了類似于em單位的功能。默認情況下瀏覽器給的字體大小是16px，按照關系轉化16px=1rem。 自適應處理 使用rem布局的時候，是兼容不同的分辨率，我們應該要動態修改根字體的大小，讓所有的用rem單位的子元素跟著一起縮放，從而達到自適應的效果查看全部
-
知識點查看全部
-
知識點查看全部
-
這段自適應大小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, //當設備的方向變化（設備橫向持或縱向持）此事件被觸發。綁定此事件時， //注意現在當瀏覽器不支持orientationChange事件的時候我們綁定了resize 事件。 //總來的來就是監聽當然窗口的變化，一旦有變化就需要重新設置根字體的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //設置根字體大小 docEl.style.fontSize =20*(docEl.clientwidth/320)+'px'; }; //綁定瀏覽器縮放與加載時間 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script>查看全部
-
自適應rem布局 rem是個低調的css單位，手淘在移動端的布局是基于rem處理的，當然還要基于viewport的處理，這里暫且不表。在我的上個七夕主題中采用的是流式布局( 使用 % 百分比定義寬度，高度大都是用px來固定住)。如果使用 em 或 rem 單位進行相對布局，相對 % 百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示。 因為em是相對父級元素的原因 沒有得到推廣，圣誕主題采用rem布局單位 rem是什么？ rem和em單位一樣，都是一個相對單位,不同的是em是相對于元素的父元素的font-size進行計算,rem是相對于根元素html的font-size進行計算,這樣一來rem就繞開了復雜的層級關系，實現了類似于em單位的功能。默認情況下瀏覽器給的字體大小是16px，按照轉化關系 16px = 1rem 自適應處理： 使用rem布局的時候,為了兼容不同的分辨率,我們應該要動態的修正根字體的大小,讓所有的用rem單位的子元素跟著一起縮放,從而達到自適應的效果 參考右邊代碼區域，一般情況在項目的最前面加載一段js來修改html的font-size，針對不同分辨率計算font-size，監聽瀏覽器更改 html的font-size docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; 給html設置fontSize大小，其實就是在DOMContentLoaded或者resize變化后調整fontSize的大小，從而調整rem的比值關系。慕課的布局是右邊區域展示，所以按照移動端的320寬度為標準去做適配的，當然基于這個縮放都是沒關系的 總結： 根據實際情況通過設計稿與當前可視區的大小做一個比例關系，通過這個比例進行縮放處理查看全部
-
16px=1rem查看全部
舉報
0/150
提交
取消