技术：html+css+jquery+jquery-ui.js+jquery.fullPage.js
概述
本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果，借助于jquery等插件。逻辑稍微复杂，里面还嵌入了柱形图等多种线性图。
详细
代码下载：
demo是模拟的一家教育机构的首页，当时学习的时候写的，主要实现的是整屏滑动，全屏翻页的效果，每次翻页都有动画的效果，内容嵌入了线性图和柱形图，代码实现稍微复杂，纯js实现的，如果有需要的朋友可以直接把代码贴到自己的项目中，把js和css放到统一的文件中。里面的H5_index.css是主要的样式文件，H5_index.js是主要的逻辑文件。页面展示的所有内容直接在H5_index.js中修改即可。如果有不想要的那个页面，直接注释掉里面对应的方法就好。
一、项目目录
二、演示效果
三、程序实现具体步骤
页面index.html
整屏滑动Demo 0%
主要逻辑 H5_index.js
$(function () {var h5 = new H5();h5.whenAddPage = function(){this.addComponent('slide_up',{bg:'imgs/footer.png',css:{opacity:0,left:0,bottom:-20,width:'100%',height:'20px',zIndex:999},animateIn:{opacity:1,bottom:'-1px'},animateOut:{opacity:0,bottom:'-20px'},delay:500});}h5.addPage('face').addComponent('logo',{center:true,width:395,height:130,bg:'imgs/face_logo.png',css:{opacity:0},animateIn:{top:100,opacity:1},animateOut:{top:0,opacity:0},}).addComponent('slogan',{center:true,width:365,height:99,bg:'imgs/face_slogan.png',css:{opacity:0,top:180},animateIn:{left:'50%',opacity:1},animateOut:{left:'0%',opacity:0},delay:500}).addComponent('face_img_left',{width:370,height:493,bg:'imgs/face_img_left.png',css:{opacity:0,left:-50,bottom:-50},animateIn:{opacity:1,left:0,bottom:0},animateOut:{opacity:0,left:-50,bottom:-50},delay:1000}).addComponent('face_img_right',{width:276,height:449,bg:'imgs/face_img_right.png',css:{opacity:0,right:-50,bottom:-50},animateIn:{opacity:1,right:0,bottom:0},animateOut:{opacity:0,right:-50,bottom:-50},delay:1000}).addPage().addComponent('caption',{text:'标题'}).addComponent('text',{width:500,height:30,center:true,text:'这是一个demo标题',css:{opacity:0,textAlign:'center',color:'red',fontSize:'26px'},animateIn:{opacity:1,top:120},animateOut:{opacity:0,top:240},}).addComponent('description',{center:true,width:481,height:295,bg:'imgs/description_bg.gif',css:{opacity:0,padding:'15px 10px 10px 10px',color:'#fff',fontSize:'15px',lineHeight:'18px',textAlign:'justify',top:240},text:'介绍内容',animateIn:{opacity:1,top:190},animateOut:{opacity:0,top:240},delay:1000}).addComponent('people',{center:true,width:515,height:305,bg:'imgs/p1_people.png',css:{opacity:0,bottom:0},animateIn:{opacity:1,bottom:40},animateOut:{opacity:0,bottom:0},delay:500}).addPage().addComponent('caption',{text:'标题'})//polyline.addComponent('polyline',{type:'polyline',data:[['测试1',.4,'#ff7676'],['测试2',.2],['测试3',.3,'blue'],['测试4',.1]],width:530,height:300,center:true,css:{opacity:0,top:200},animateIn:{opacity:1,top:250},animateOut:{opacity:0,top:100},}).addComponent('msg',{text:'测试',css:{opacity:0,top:160,textAlign:'center',width:'100%',color:'#ff7676'},animateIn:{ opacity:1},animateOut:{ opacity:0}}).addPage().addComponent('caption',{text:'测试'})//pie.addComponent('pie',{type:'pie',data:[['测试' , .4 ,'#ff7676'],['测试' , .3 ],['测试' , .2 ],['测试' , .1 ],],css:{top:200},width:300,height:300,center:true}).addComponent('msg',{text:'测试',css:{opacity:0,bottom:120,textAlign:'center',width:'100%',color:'#ff7676'},animateIn:{ opacity:1},animateOut:{ opacity:0}}).addPage() //bar（bar_v）.addComponent('caption',{text:'测试'}).addComponent('bar',{type : 'bar',width : 530,height : 600,data:[['测试' , .4 ,'#ff7676'],['测试' , .2 ],['测试' , .1 ],['测试' , .2 ],['测试' , .35 ],['测试' , .05 ],['测试' , .09 ]],css : {top:100,opacity:0},animateIn:{opacity:1,top:200,},animateOut:{opacity:0,top:100,},center : true,}).addComponent('msg',{text:'测试',css:{opacity:0,bottom:120,textAlign:'center',width:'100%',color:'#ff7676'},animateIn:{ opacity:1},animateOut:{ opacity:0}}).addPage() //（bar_v）.addComponent('caption',{text:'测试'}).addComponent('bar',{type : 'bar_v',width : 530,height : 400,data:[['测试' , .4 ,'#ff7676'],['测试' , .1 ],['测试' , .2 ],['测试' , .05 ],['测试' , .35 ]],css : {top:220,opacity:0},animateIn:{opacity:1,top:200,},animateOut:{opacity:0,top:220,},center : true}).addComponent('msg',{text:'测试',css:{opacity:0,top:180,textAlign:'center',width:'100%',color:'#ff7676'},animateIn:{ opacity:1},animateOut:{ opacity:0}}).addPage().addComponent('caption',{text:'测试'})//radar.addComponent('radar',{type : 'radar',width : 400,height : 400,data:[['测试' , .9 ,'#ff7676'],['测试' , .8 ],['测试' , .7 ],['测试' , .6 ],['测试' , .5 ]],css : {top:100,opacity:0},animateIn:{opacity:1,top:200,},animateOut:{opacity:0,top:100,},center : true,}).addPage().addComponent('caption',{text:'测试'})//ring.addComponent('ring-all',{type : 'ring',center : true,width : 300,height : 300,data:[['测试' , .7 ,'#ff7676']],css : { top:120,opacity:0 ,fontSize:'30px'},animateIn: { opacity:1},animateOut:{ opacity:0},}).addComponent('msg',{text:'测试',css:{opacity:0,top:300,textAlign:'center',width:'100%',color:'#ff7676'},animateIn:{ opacity:1},animateOut:{ opacity:0},delay:1800,}).addComponent('ring-1',{type : 'ring',center : true,width : 140,height : 140,data:[['测试' , .4 ,'darkorange']],css : { left:30,bottom:110,opacity:0,fontSize:'12px' },animateIn: { opacity:1},animateOut:{ opacity:0},}).addComponent('ring-2',{type : 'ring',width : 140,height : 140,data:[['测试' , .3 ,'darkorange']],css : { left:30,bottom:110,opacity:0,fontSize:'12px' },animateIn: { opacity:1},animateOut:{ opacity:0},}).addComponent('ring-3',{type : 'ring',width : 140,height : 140,data:[['测试' , .2 ,'darkorange']],css : { right:30,bottom:110,opacity:0,fontSize:'12px' },animateIn: { opacity:1},animateOut:{ opacity:0},}).addComponent('ring-3',{type : 'ring',width : 140,height : 140,data:[['测试' , .1 ,'darkorange']],css : { left:70,bottom:40,opacity:0,fontSize:'12px' },animateIn: { opacity:1},animateOut:{ opacity:0},}).addComponent('ring-3',{type : 'ring',width : 140,height : 140,data:[['测试' , .1 ,'darkorange']],css : { right:70,bottom:40,opacity:0,fontSize:'12px' },animateIn: { opacity:1},animateOut:{ opacity:0},}).addPage().addComponent('caption',{text:'测试'})//point.addComponent('point',{type : 'point',width : 300,height : 300,data:[['测试' , .4 ,'#ff7676'],['测试' , .2 ,'#ffa3a4', 0 ,'-60%'],['测试' , .3 ,'#99c1ff', '50%' ,'-120%']],css : {bottom:'20%'},center : true,}).addPage('tail').addComponent('logo',{center:true,width:359,height:129,bg:'imgs/logo.png',css:{top:240,opacity:0},animateIn:{opacity:1,top:210},animateOut:{opacity:0,top:240},}).addComponent('slogan',{center:true,width:314,height:46,bg:'imgs/tail_slogan.png',css:{top:280,opacity:0},animateIn:{opacity:1,left:'50%'},animateOut:{opacity:0,left:'0%'},delay:500}).addComponent('share',{width:128,height:120,bg:'imgs/tail_share.png',css:{opacity:0,top:110,right:110},animateIn:{opacity:1,top:10,right:10},animateOut:{opacity:0,top:110,right:110},delay:1000 }).addComponent('back',{width:52,height:50,bg:'imgs/tail_back.png',center:true,onclick : function(){$.fn.fullpage.moveTo( 1 )}}).loader( [ 'imgs/tail_back.png','imgs/tail_share.png','imgs/tail_slogan.png' ] );}); 主要样式 H5_index.css
body{margin: 0;padding: 0;}.h5_page{background-image: url(../imgs/page_bg.png);}.h5_page_face{background-image: url(../imgs/face_bg.png);}.h5_component_name_slogan{-webkit-animation:rock 2s infinite 2s;}@-webkit-keyframes rock{0%{ transform:rotate(0deg)}5%{ transform:rotate(3deg)}10%{ transform:rotate(-4deg)}15%{ transform:rotate(3deg)}20%{ transform:rotate(-2deg)}25%{ transform:rotate(1deg)}30%{ transform:rotate(-1deg)}70%{ transform:rotate(0deg)}100%{ transform:rotate(0deg)}}.h5_component_name_caption{background-image: url(../imgs/page_caption_bg.png);width: 283px;height: 160px;text-align: center;line-height: 140px;font-size: 20px;color: #fff;}.h5_component_name_back{top: 30px;-webkit-animation:back 2s infinite 2s;}@-webkit-keyframes back{50%{ top: 20px; }}
其他注意点：
代码借助的第三方插件比较多，不要太深究如何实现的，只要能够正常使用就ok了。
一直在学习，从未敢停歇。