通过js实现整屏滑动+全屏翻页+动画展⽰+线性图
技术：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
<!DOCTYPE html>
<html>
<head>
<meta chart="UTF-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>整屏滑动Demo</title>
<!-- 载⼊所有的组件资源 -->
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/lib/jquery.fullPage.js"></script>
<!-- H5对象：进⾏内容管理 -->
<script type="text/javascript" src="js/H5.js"></script>化妆品都有什么
<link rel="stylesheet" type="text/css" href="css/H5.css" >
<script type="text/javascript" src="js/H5_loading.js"></script>
<!-- 相关样式 -->
<link rel="stylesheet" type="text/css" href="css/H5_loading.css" >
<link rel="stylesheet" type="text/css" href="css/H5ComponentBa.css">
<link rel="stylesheet" type="text/css" href="css/H5ComponentBar.css">
<link rel="stylesheet" type="text/css" href="css/H5ComponentBar_v.css">
<link rel="stylesheet" type="text/css" href="css/H5ComponentPoint.css">
<link rel="stylesheet" type="text/css" href="css/H5ComponentPolyline.css">
<link rel="stylesheet" type="text/css" href="css/H5ComponentRadar.css">
<link rel="stylesheet" type="text/css" href="css/H5ComponentPie.css">
<link rel="stylesheet" type="text/css" href="css/H5ComponentRing.css">
<!-- 相关样式 -->
<!-- 页⾯逻辑的样式 -->
<link rel="stylesheet" type="text/css" href="css/H5_index.css" >
<!-- 页⾯逻辑的样式 -->
<body>
<div class="loading">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
<div id="rate">0%</div>
</div>
<!-- 相关逻辑 -->
<script src="js/H5ComponentBa.js"></script>
<script src="js/H5ComponentBar.js"></script>
<script src="js/H5ComponentBar_v.js"></script>
<script src="js/H5ComponentPoint.js"></script>
<script src="js/H5ComponentPolyline.js"></script>
<script src="js/H5ComponentRadar.js"></script>
<script src="js/H5ComponentPie.js"></script>
<script src="js/H5ComponentRing.js"></script>
<!-- 相关逻辑 -->
<!-- 页⾯逻辑 -->
</body>
</html>
主要逻辑 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:{
梦的味道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 ],
['测试' , .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 ],
word表格分页
['测试' , .5 ]
],
css : {
},
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%']
