前提知识：

1、能够独立根据设计稿进行整套项目的需求、剖析及其开发；

2、对项目开发流程需要有一个基本的了解；

3、可以灵活运用切图、重构、前端的知识对项目进行灵活控制。

 

开发步骤之需求分析：

1、确定项目主题，确定表现的形式；

2、设计稿图层分析，多页视觉放到一个网页文档，采取视觉差特效完成分页展示；

3、音乐不跟随翻页，位置固定，播放旋转，可暂停。

 

开发步骤之技术分析：

1、移动端项目，采用HTML 5作为项目的结构层；

2、分析网页呈现形势，直接采用CSS 3完成网页的表现层；

3、特效分析，采用CSS3完成主要特效，采用JavaScript控制交互；

4、背景音乐直接采取JavaScript控制audio的API进行控制；

5、直接采用原生态的JavaScript控制CSS 3实现翻页效果，放弃前端框架和类库。

 

开发步骤之性能优化分析：

1、项目作为移动端项目，尽可能简化结构层标签；

2、尽可能少用图片，尽量直接用CSS 3控制标签完成图片效果；

3、尽可能减小文件大小，压缩图片到无损最小值；

4、减少服务器请求次数，用原生态JavaScript代替Zepto等前端框架。

 

切图——>重构——>前端——>优化

1、减小图片文件，背景图片采用JPG格式，其他图片采用png24透明格式；

2、小型项目，直接采用手写HTML 5+CSS 3完成；

3、采用JavaScript控制HTML 5API完成前端特效；

 

 

结构层分析

整个结构层其实就是DIV再加上HTML5中audio新元素搭建起来，唯一需要记住的就是meta标签里面属性的含义，如：

1、<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

viewport  即可视区域

width=device-width  宽度是设备屏幕的宽度（像素）；

height=device-height  高度是设备屏幕的高度（像素）；

initial-scale  初始的缩放比例；

minimum-scale  允许用户缩放到的最小比例；

maximum-scale  允许用户缩放大的最大比例；

user-scalable  用户是否可以手动缩放。

 

2、<meta name=”format-detection” content=”telephone=no” />

telephone=no  就禁止了把数字转化为拨号链接！

 

3、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

它其实是指定浏览器按某种方式渲染。添加”chrome=1“将允许站点在使用了谷歌浏览器内嵌框架（Chrome Frame）的客户端渲染，对于没有使用的，则没有任何影响。

源代码：

    
          
          
          
              
              
      
        
               
               
      
        
      
        
       
        
       
        点击屏幕
        
开启好运2016
       
        
       
        
       
        2016年慕课网新年献
       
    
      
    
      
        
       
        
       
        
       
        
       
    
      
    
      
        
       
        
       
        
       
        
       
        
       
        
       
    
      
        
      

 

 

样式层分析

样式层使用了大量的position属性作为盒子的布局属性，也利用了层级（z-index）避免该显示的盒子受到遮盖。关于CSS 3则定义了许多变形（transform）的动画（keyframes），然后利用animation调用属性，需要注意是其兼容性。让我觉得新颖的是vw和vh这两个数值，后来查看网上资料得知：

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

这两个数值和%的区别就是% 是相对于父元素的大小设定的比率，而vw和vh设定的大小只和视窗大小有关，所以用来开发多种屏幕设备的应用用这个单位还是挺合适的。

源代码：

/*all tag*/* {margin:0;padding:0;border:none;font-size:1.5625vw;font-family:"微软雅黑";}html,body{height: 100%;overflow: hidden;}.music{position:absolute;top: 3vh;right: 4vw;z-index: 5;width: 15vw;height: 15vw;border: 4px solid #ef1639;border-radius: 50%;background: #fff;}.music > img:first-of-type{    position: absolute;    top: 24%;    right:2.5%;    width: 28.421%;    z-index: 1;}.music > img:last-of-type{    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;    width: 79%;    z-index: 0;}.music > img.play{    -webkit-animation: music_disc 4s linear infinite ;    -moz-animation: music_disc 4s linear infinite;    -o-animation: music_disc 4s linear infinite;    animation: music_disc 4s linear infinite;}@-webkit-keyframes music_disc{    0%{        -webkit-transform: rotate(0deg);        -ms-transform: rotate(0deg);        -moz-transform: rotate(0deg);        -o-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(360deg);        -ms-transform: rotate(360deg);        -moz-transform: rotate(360deg);        -o-transform: rotate(360deg);        transform: rotate(360deg);    }}@-0-keyframes music_disc{    0%{        -webkit-transform: rotate(0deg);        -ms-transform: rotate(0deg);        -moz-transform: rotate(0deg);        -o-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(360deg);        -ms-transform: rotate(360deg);        -moz-transform: rotate(360deg);        -o-transform: rotate(360deg);        transform: rotate(360deg);    }}@-ms-keyframes music_disc{    0%{        -webkit-transform: rotate(0deg);        -ms-transform: rotate(0deg);        -moz-transform: rotate(0deg);        -o-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(360deg);        -ms-transform: rotate(360deg);        -moz-transform: rotate(360deg);        -o-transform: rotate(360deg);        transform: rotate(360deg);    }}@keyframes music_disc{    0%{        -webkit-transform: rotate(0deg);        -ms-transform: rotate(0deg);        -moz-transform: rotate(0deg);        -o-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(360deg);        -ms-transform: rotate(360deg);        -moz-transform: rotate(360deg);        -o-transform: rotate(360deg);        transform: rotate(360deg);    }}/* page */.page{    position: absolute;    height:100%;    width: 100%;}.page > .bg {    position:absolute;    height:100%;    width:100%;    z-index: -1;}/*page1*/#page1{    display: block;}#page1 > .bg{    background: url("../images/p1_bg.jpg") no-repeat center center;    background-size:100%;}#page1 > .p1_lantern {    position: absolute;    color: #FFFFFF;    top:-3.4%;    right:0;    left:0;    margin: auto;    background: url("../images/p1_lantern.png") no-repeat center bottom;    background-size:100%;    width:45vw;    height:71.2vh;    font-size:3.506rem;    padding-top:31vh;    text-align: center;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    -ms-box-sizing: border-box;    -o-box-sizing: border-box;    box-sizing: border-box;}#page1 > .p1_lantern:before{    position: absolute;    content:"";    z-index: -1;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;    width: 30vw;    height: 30vw;    background: #d60b3b;    opacity: .5;    border-radius: 50%;    -webkit-box-shadow: 0 0 10vw 10vw #d60b3b;    -moz-box-shadow: 0 0 10vw 10vw #d60b3b;    -ms-box-shadow: 0 0 10vw 10vw #d60b3b;    -o-box-shadow: 0 0 10vw 10vw #d60b3b;    box-shadow: 0 0 10vw 10vw #d60b3b;    -webkit-animation: p1_lantern .5s infinite alternate;    -0-animation: p1_lantern .5s infinite alternate ;    animation:  p1_lantern .5s infinite alternate;}@-webkit-keyframes p1_lantern{    0%{        opacity: .5;        -webkit-transform: scale(.8,.8);        transform: scale(.8,.8);    }        100%{        opacity: 1;    }}@keyframes p1_lantern{    0%{        opacity: .5;        -webkit-transform: scale(.8,.8);        transform: scale(.8,.8);    }        100%{        opacity: 1;    }}#page1 > .p1_imooc {    position: absolute;    right: 0;    bottom:9vh;    left: 0;    margin: auto;    background: url('../images/p1_imooc.png') no-repeat center center;    background-size:100% ;    width:27.656vw;    height: 18.63vh;}#page1 > .p1_words {    font-size:2.134rem;    position:absolute;    right: 0;    bottom:48px;    left: 0;    text-align: center;    color: #231815;}/*page2*/#page2{    display: none;    -webkit-transition: .5s;    transition: .5s;}#page2.fadeOut{    opacity: .3;    -webkit-transform: translate(0,-100%);            transform: translate(0,-100%);}#page2 >  .p2_bg_loading{    z-index: 4;    background: #ef1639;    -webkit-animation: p2_bg_loading 1s linear forwards;    animation: p2_bg_loading 1s linear forwards;}@-webkit-keyframes p2_bg_loading{    0%{opacity: 1;}    100%{opacity: 0;}}@keyframes p2_bg_loading{    0%{opacity: 1;}    100%{opacity: 0;}}#page2 > .bg{    background: url("../images/p2_bg.jpg") no-repeat center center;    background-size:100%;    }#page2 > .p2_circle {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;    background: url(../images/p2_circle_outer.png) no-repeat center center;    background-size:100% ;    width: 59.375vw;    height: 59.375vw;    -webkit-animation: p2_circle_middle 1s infinite 3s alternate;    -0-animation: p2_circle_middle 1s infinite 3s alternate ;    animation:  p2_circle_middle 1s infinite 3s alternate;}@keyframes p2_circle_middle{    0%{        -webkit-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(720deg);        transform: rotate(720deg);    }}@-webkit-keyframes p2_circle_inner{    0%{        -webkit-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(-360deg);        transform: rotate(-360deg);    }}#page2 > .p2_circle:before{        position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;    background: url(../images/p2_circle_middle.png) no-repeat center center;    background-size:100% ;    width: 45.625vw;    height: 45.625vw;    content: "";    -webkit-animation: p2_circle_middle 1s infinite 2s alternate;    -0-animation: p2_circle_middle 1s infinite 2s alternate ;    animation:  p2_circle_middle 1s infinite 2s alternate;}@keyframes p2_circle_middle{    0%{        -webkit-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(720deg);        transform: rotate(720deg);    }}@-webkit-keyframes p2_circle_inner{    0%{        -webkit-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(720deg);        transform: rotate(720deg);    }}#page2 > .p2_circle:after {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;    border-radius: 50%;    background: url(../images/p2_circle_inner.png) no-repeat center center;    background-size:100% ;    width: 39.9375vw;    height: 39.9375vw;    content:"";    -webkit-animation: p2_circle_inner 1s infinite 1s alternate;    -0-animation: p2_circle_inner 1s infinite 1s alternate ;    animation:  p2_circle_inner 1s infinite 1s alternate;}@keyframes p2_circle_inner{    0%{        -webkit-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(-1080deg);        transform: rotate(-1080deg);    }}@-webkit-keyframes p2_circle_inner{    0%{        -webkit-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(-1080deg);        transform: rotate(-1080deg);    }}#page2 > .p2_2016 {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;    background: url(../images/p2_2016.png) no-repeat center center;    background-size:100% ;    width: 27.5vw;    height: 6.24vh;    content:"";}/*page3*/#page3{    display: none;    -webkit-transition: .5s;    transition: .5s;}#page3.fadeIn{    -webkit-transform: translate(0,-100%);    transform: translate(0,-100%);}#page3 > .bg{    background: url("../images/p3_bg.jpg") no-repeat center center;    background-size:100%;    }#page3 > .p3_logo{    width: 34.6875vw;    height: 6.327vh;    position: absolute;    top: 7.82vh;    right: 0;    left: 0;    margin: auto;    background: url(../images/p3_logo.png) no-repeat center center;    background-size:100% ;}#page3 > .p3_title {    width: 48.125vw;    height: 50vh;    position: absolute;    top: 21vh;    right: 0;    left: 0;    margin: auto;    background: url(../images/p3_title.png) no-repeat center center;    background-size:100% ;}#page3 > .p3_second {    width: 22.8125vw;    height: 41.652vh;    position: absolute;    top: 25.48vh;    left: 3.75vw;    margin: auto;    background: url(../images/p3_couplet_second.png) no-repeat center center;    background-size:100% ;}#page3 > .p3_first {    width: 22.8125vw;    height: 41.652vh;    position: absolute;    top: 25.48vh;    right: 3.75vw;    margin: auto;    background: url(../images/p3_couplet_first.png) no-repeat center center;    background-size:100% ;}#page3 > .p3_blessing {    width: 32vw;    height: 32vw;    position: absolute;    right: 0;    left: 0;    bottom: 10vh;    margin: auto;    border-radius: 50%;    background: url(../images/p3_blessing.png) no-repeat center center;    background-size:100% ;    -webkit-animation: p3_blessing 2s linear infinite;    -0-animation: p3_blessing 2s linear infinite ;    animation:  p3_blessing 2s linear infinite;}@keyframes p3_blessing{    0%{        -webkit-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(360deg);        transform: rotate(360deg);    }}@-webkit-keyframes p3_blessing{    0%{        -webkit-transform: rotate(0deg);        transform: rotate(0deg);    }    100%{        -webkit-transform: rotate(360deg);        transform: rotate(360deg);    }}

 

 

行为层分析

传统的行为交互开发步骤，首先获取元素节点，接着为各个节点绑定一个监听事件

window.onload = function(){    var music = document.getElementById('music');    var audio = document.getElementsByTagName('audio')[0];    var page1 = document.getElementById('page1');    var page2 = document.getElementById('page2');    var page3 = document.getElementById('page3');        //当音乐播放完停止时候，自动停止光盘旋转效果    audio.addEventListener("ended",function(event){        music.setAttribute("class","");    },false);        music.addEventListener("touchstart",function(event){        if(audio.paused){            audio.play();            this.setAttribute("class","play");        }else{            audio.pause();            this.setAttribute("class","");        }    })        page1.addEventListener("touchstart",function(event){        page1.style.display = "none";        page2.style.display = "block";        page3.style.display = "block";        page3.style.top = "100%";        setTimeout(function(){            page2.setAttribute("class","page fadeOut");            page3.setAttribute("class","page fadeIn");        },5500);            },false);}