[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> ```