[toc] ## pre  ## 主體結構 ``` <main class="mainBox"> <section class="loadingBox"> </section> <section class="messageBox" </section> <section class="cubeBox" </section> <section class="detailBox" </section> </main> ``` ``` html{ font-size:100px; } html,body{ height:100%; overflow:hidden; background:#f4f4f4; } .mainBox{ //這里是px，而不是rem，是設計稿的最大尺寸，大于設計稿的屏幕顯示時會居中顯示，其它地方留白；而我們適配，其實只是適配小于這個尺寸的屏幕 max-width:640px; height:100%; backaground:#fff; overflow:hidden; } .loadingBox,.phoneBox,.messageBox,.cubeBox,.detailBox{ position:relative; //=>讓當前區域中的后代元素都相對于本區域定位 display:none; height:100%; overflow:hidden; } ``` ## 適配 ``` ~function(){ function computed(){ //=>DES-W 設計稿寬度 DEV-W設備的寬度 let desW = 640 ,devW = document.documentElement.clientWidth; //超過才縮放，不超過不縮放 if(devW>=640) return; document.documentElement.style.fontSize = devW/desW*100+'px'; } computed(); window.addEventListener('resize',computed,false); }(); ``` ## loadingBox部分  ``` <section class="loadingBox"> <div class="title"> <h1>珠峰培訓</h1> <h2>H5場景的交互星簡歷</h2> </div> <div class="progress"> <div class="run"> </div> </div> </section>7 ```   ### 加載進度動畫 ``` .loadingBox { // display:block; background:#000; .title { position:absolute; top:50%; left:0; margin-top: unit((-1.4/2)+(-1.5),rem) width:100%; height:1.4rem; text-align:center; color:#fff; letter-spacing:.04rem; h1{ line-height:.75rem; font-size:.5rem; } h2{ margin-top:.2rem; line-height:.45rem; font-size:.26rem; } } .progress{ @w:4.6; @h:.3; position:absolute; width:unit(@w,rem); height:.unit(@h,rem); top:50%; left:50%; margin-left:unit(-@w/2,rem); margin-top:unit(-@h/2+1,rem); width:4.6rem; height:.3rem; background:#fff; border-radius:unit(-@h/2,rem); //=>圓角值是高度一半 .run{ position:absolute; top:0; left:0; width:0%; height:unit(@h,rem); border-radius:unit(-@h/2,rem); transition:.3s; //在JS控制WIDTH變化的時候有一個些許的動畫 //background-repeat:repeat-x; background:linear-gradient(left,bottom,#5cb85c 0%,#5cb85c 25%,#74c274 25%,#74c274 50%,,#5cb85c 50%,#5cb85c 75%,#74c274 75%,#74c274 100%); background-size:unit(@h,rem) unit(@h,rem); animation:loadingMove 1s linear infinite both; } } } //默認是平鋪的，我們讓它往上走 @keyframes loadingMove { 0% { background-position:0 0; } 100% { background-position:0 -3rem; } } ``` ### 實現真實加載進度 真實項目中我們一般以圖片的加載作為加載基準 ``` let loadingRender = (function(){ let $loadingBox = $('.loadingBox') ,$run = $loadingBox.find('.run'); //我們需要的圖片 let imgList = [...] let total = imgList.length ,cur = 0; //=>控制圖片加載進度，計算滾動條加載長度 let computed = function(){ imgList.forEach(function(item){ let temImg = new Image; tempImg.src=item; tempImg.onload=function(){ tempImg = null; cur++; runFn(cur); } }); }; //=>計算滾動條加載長度 let runFn = function(){ $run.css('width',cur/total*100+'%'); if(cur>=total){ //=>需要延遲的圖片都加載成功了：進入到下一個區域(設置一個緩沖等待時間，當加載完成，讓用戶看到加載完成的效果再進入到下一個區域) let delayTimer = setTimeout(()=>{ $loadingBox.remove(); phoneRender.init(); clearTimeout(delayTimer); },300) } }; return { init:function(){ $loadingBox.css('display','block'); //=>我們在CSS中把所有區域的DISPLAY都設置為NONE，以后開發的時候，開發哪個區域，我們就執行哪個區域的INIT方法，在這個方法中首先控制當前區域展示(開發哪個區域，哪個區域展示，其它區域都是隱藏的) computed(); } } })(); loadingRender.init(); ``` ## phoneBox部分  detail頁↓  ``` let phoneRender = (function(){ let $phoneBox = $('.phoneBox'); return { init:function(){ $phoneBox.css('display','block'); } } })(); phoneRender.init(); ``` ``` <section class="messageBox"> <div class="header"> <img src="img/zf_phoneLogo.png" class="logo"> <span class="time">00:00</span> </div> <div class="listen"> <div class="move"></div> <a href="javascript:;" class="touch"></a> </div> <div class="detail"> <a href="javascript:;" class="touch"></a> </div> </section> ``` ```## .phoneBox{ background:url("../img/zf_phoneBg.jpg") no-repeat; background-size:cover; .header{ position:absolute; top:.5rem; left:50%; margin-left:unit(-2.62/2,rem); width:2.62rem; .logo{ display:block; width:100%; height:1.25rem; } .time{ display:block; margin-too:.1rem; line-height:.3rem; text-align:center; color:#fff; font-size:.3rem; letter-spacing:.05rem; } } .listen{ position:absolute; bottom:.3rem; left:50%; margin-left:unit(-5.2/2,rem); width:5.2rem; height:3.6rem; background:url("../img/zf_phoneListen.png") no-repeat; background-size:100% 100%; .touch{ position:absolute; right:.-06rem; bottom:.48rem; width:1.6rem; height:1.6rem; } .move { .touch; box-sizing:border-box; border:.03rem solid; #0f0; border-radius:50%; animation: listenTouchMove 1s linear infinite both; } } .detail { position:absolute; bottom:.3rem; left:50%; margin-left:unit(-5.2/2,rem); width:5.2rem; height:6.59rem; background:url("../img/zf_phoneListen.png") no-repeat; background-size:100% 100%; //=>init position transform:translateY(6.59rem); transition:.3s; .touch{ position:absolute; bottom:.28rem; left:50%; margin-left:unit(-1.6/2,rem); z-index:10; width:1.6rem; height:1.6rem; } } } ``` ``` @keyframes listenTouchMove { 0% { transform: scale(1.2); } 100% { transform: scale(0); } } ``` ### HTML5中的audio >音頻播放標簽，通過它可以播放音頻文件(支持格式:mp3,ogg,wav); > >[使用] >`<audio> src='xxx.mp3'></audio>` > 如果是多種音頻格式 ``` <audio> <source src='xxx.mp3' type='audio/mpeg'> <source src='xxx.ogg' type='audio/ogg'> <source src='xxx.wav' type='audio/wav'> 您的瀏覽器不支持AUDIO，請升級瀏覽器 </audio> ``` **AUDIO** 中常用的內置屬性 - `controls`：是否使用內置的播放器播放，默認是不顯示瀏覽器自帶播放器的，加上這個屬性則顯示 - `autoplay`：自動播放(這個屬性一般不用，我們一般都是在 JS中控制播放或暫停) - `preload`：設置當前音頻文件預先加載的模式，默認值 **auto**，代表開始加載頁面的時候就把音頻文件進行加載；**metadata** 代表開始加載頁面我們只加載一些最基礎的信息，主體音頻信息需要播放后才加載；**none** 開始什么都不加載，都是等到播放后才開始加載(最常用)。 - `loop`：播放完后循環播放。 ``` <audio src="audio/bell.mp3" controls preload="none"></audio> ```