經過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中修改便可。若是有不想要的那個頁面，直接註釋掉裏面對應的方法就好。javascript
1、項目目錄
2、演示效果
3、程序實現具體步驟
頁面index.htmlcss
<!DOCTYPE html> <html> <head> <meta charset="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/H5ComponentBase.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/H5ComponentBase.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> <!-- 相關邏輯 --> <!-- 頁面邏輯 --> <script src="js/H5_index.js"></script> <!-- 頁面邏輯 --> </body> </html>
主要邏輯 H5_index.jshtml
$(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.cssjava
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; }
}
其餘注意點：jquery
代碼藉助的第三方插件比較多，不要太深究如何實現的，只要可以正常使用就ok了。web
一直在學習，從未敢停歇。app
注：本文著做權歸做者，由demo大師發表，拒絕轉載，轉載須要做者受權
相關文章
- 1. css3+js實現整屏滑動
- 2. 移動端整頁滑屏示例（上下滑動整屏）
- 3. Python實現屏幕滑動
- 4. js圖片滑動展現
- 5. 原生js實現全屏滾動--fullPage
- 6. 原生js實現全屏滾動
- 7. 原生js實現網頁觸屏滑動
- 8. 手機端滑屏翻頁，頁面元素動畫
- 9. H5全屏滑動
- 10. Android實現ViewPager滑屏動作並添加動畫效果
- 更多相關文章...
- • ionic 滑動框 - ionic 教程
- • ionic 加載動畫 - ionic 教程
- • 算法總結-滑動窗口
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. css3+js實現整屏滑動
- 2. 移動端整頁滑屏示例（上下滑動整屏）
- 3. Python實現屏幕滑動
- 4. js圖片滑動展現
- 5. 原生js實現全屏滾動--fullPage
- 6. 原生js實現全屏滾動
- 7. 原生js實現網頁觸屏滑動
- 8. 手機端滑屏翻頁，頁面元素動畫
- 9. H5全屏滑動
- 10. Android實現ViewPager滑屏動作並添加動畫效果