点击不同按钮进行切换页面
HTML
<head>
<meta charset="utf-8">
<title>360浏览器</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/jquery.fullPage.min.css">
<link rel="stylesheet" href="css/00.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/00.js"></script>
</head>
<div id="container">
<div class="section home1">
<div class="containerIn">
<div class="logo"></div>
<p class="logoFont">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
<div class="logoBottomFont"></div>
</div>
</div>
<div class="section home2">
<img src="images/p2-left.png" class="p2Left" />
<img src="images/p2-right.png" class="p2Right" />
</div>
<div class="section home3">
<div class="containerIn">
<div class="home3Title"></div>
<div class="home3Box"></div>
</div>
</div>
<div class="section home4">
<div class="containerIn">
<div class="logo"></div>
</div>
</div>
</div>
<!-- 侧边栏 -->
<ul class="navList">
<li class="current"><a href="#page1"></a></li>
<li><a href="#page2"></a></li>
<li><a href="#page3"></a></li>
<li><a href="#page4"></a></li>
</ul>
CSS
/* 侧边栏开始 */
.navList{
position: fixed;
right: 10px;
top: 50%;
width: 22px;
background: url('../images/center.png');
transform: translateY(-50%);
}
.navList:before,.navList:after{
content:"";
width: 22px;
height: 20px;
position: absolute;
left: 0;
top: -20px;
background: url('../images/top.png');
}
.navList:after{
top: auto;
bottom: -20px;
background: url('../images/bottom.png');
}
.navList li{
width: 22px;
height: 16px;
background: url('../images/sprite.png') no-repeat -37px -131px;
margin-bottom: 10px;
}
.navList li a{
display: block;
width: 100%;
height: 100%;
}
.navList li:nth-last-child(1){
margin-bottom: 0;
}
.navList li.current{
background-position: -37px -110px;
}
/* 侧边栏结束 */
/* 首屏样式开始 */
.section{
position: relative;
overflow: hidden;
}
.containerIn{
position: absolute;
width: 100%;
height: 480px;
left: 0;
top: 50%;
transform: translateY(-55%);
}
.logo{
width: 247px;
height: 185px;
background: url(../images/p1.png) -256px 0;
margin: 0 auto;
}
.logoFont{
width: 100%;
height: 90px;
text-align: center;
margin: 60px 0;
}
.home1.current .logoFont span{
opacity: 1;
margin: 0;
}
.logoFont span{
transition: all 1s linear;
opacity: 0;
margin: 0 30px;
display: inline-block;
width: 92px;
height: 90px;
background: url(../images/p1.png);
}
.logoFont span:nth-child(1){
background-position: -7px -208px;
width: 63px;
}
.logoFont span:nth-child(2){
background-position: -76px -205px;
}
.logoFont span:nth-child(3){
background-position: -181px -207px;
}
.logoFont span:nth-child(4){
background-position: -277px -204px;
}
.logoFont span:nth-child(5){
background-position: -375px -205px;
}
.logoFont span:nth-child(6){
background-position: -481px -207px;
}
.logoFont span:nth-child(7){
background-position: -576px -205px;
}
.logoFont span:nth-child(8){
background-position: -677px -204px;
}
.section.current .logoBottomFont{
opacity: 1;
transform: rotate(360deg);
}
.logoBottomFont{
transition: all 1s linear;
transform: rotate(0);
opacity: 0;
width: 772px;
height: 49px;
margin: 0 auto;
background: url(../images/p1.png) 0 -345px;
}
/* 首屏样式结束 */
/* 第2屏开始 */
.home2.current .p2Left{
transform: translate(-130%,-50%);
opacity: 1;
}
.home2.current .p2Right{
transform: translate(-10%,-50%);
opacity: 1;
}
.p2Left,.p2Right{
opacity: 0;
transition: all 1s linear;
}
.p2Left{
width: 428px;
height: 498px;
position: absolute;
left: 50%;
top: 50%;
/* transform: translate(-130%,-50%); */
transform: translate(-300%,-50%);
}
.p2Right{
width: 635px;
height: 309px;
position: absolute;
left: 50%;
top: 50%;
/* transform: translate(-10%,-50%); */
transform: translate(150%,-50%);
}
/* 第2屏结束 */
/* 第3屏开始 */
.home3.current .home3Title,.home3.current .home3Box{
transform: translateX(-50%) scale(1) rotate(720deg);
opacity: 1;
}
.home3Title,.home3Box{
transition: all 1s linear;
opacity: 0;
}
.home3Title{
width: 1077px;
height: 133px;
position: absolute;
left: 50%;
transform: translateX(-50%) scale(3) rotate(0);
top: 0;
background: url(../images/p3.png);
}
.home3Box{
width: 1100px;
height: 575px;
position: absolute;
left: 50%;
transform: translateX(-50%) scale(3) rotate(0);
bottom: -203px;;
background: url(../images/p3.png) center bottom;
}
/* 第3屏结束 */
/* 第4屏 */
.home4.current .logo{
animation: flash 1s linear 2;
}
@keyframes flash{
0%{
opacity: 1;
}
25%{
opacity: 0;
}
50%{
opacity: 1;
}
75%{
opacity: 0;
}
100%{
opacity: 1;
}
}
JS
//页面加载完毕后，让第一屏进场
window.onload=function(){
$('.section').eq(0).addClass('current');
}
$(function() {
var $aLi=$('.navList li');
var $aSection=$('.section');
$('#container').fullpage({
'sectionsColor':['#119AC7','#2DAB5F','#19AD93','#119AC7'],
'scrollingSpeed':1000,
'easingcss3':'ease',
'continuousVertical':true,
'navigation':false,
'anchors':['page1','page2','page3','page4'],
'onLeave':function(index,nextIndex,direction){
//滚动前会触发的函数，
//index是离开页面的序号【从1开始】，
//nextIndex是即将去往的页面的序号，
//direction返回’up’或者’down’用来判断滚屏方向。
$aLi.eq(index-1).removeClass('current');
$aLi.eq(nextIndex-1).addClass('current');
//移除离开的页面的进场
$aSection.eq(index-1).removeClass('current');
//给即将去往的页面添加进场
$aSection.eq(nextIndex-1).addClass('current');
}
});
});