核心提示：1. 该demo实现了全屏翻页，根据顶部导航翻页，侧边栏翻页等2. 添加了水平翻页，添加水平导航，并去除水平箭头(太难看，不能忍)3.配合fullpage的回调函数，运用move.js对文字和图片添加...
1. 该demo实现了全屏翻页，根据顶部导航翻页，侧边栏翻页等
2. 添加了水平翻页，添加水平导航，并去除水平箭头(太难看，不能忍)
3.配合fullpage的回调函数，运用move.js对文字和图片添加了包括放大、移动、旋转在内的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css" />
<style>
body{text-align: center;color: #FFFFFF;}
#fullpageMenu{
position: fixed;
top: 0;
z-index: 999;
}
#fullpageMenu li{float: left;display: inline-table;}
.section3 h1{margin-left: 10%;opacity: 0.5}
.section3 p{margin-right: 10%;opacity: 0.5}
</style>
</head>
<body>
<ul id="fullpageMenu">
<li><a href="#page1">1</a></li>
<li><a href="#page2">2</a></li>
<li><a href="#page3">3</a></li>
<li><a href="#page4">4</a></li>
<li><a href="#page5">5</a></li>
</ul>
<p id="fullpage">
<p class="section section1">
<h1>这是测试</h1>
<p>测试内容，这是一个简单文本</p>
</p>
<p class="section section2">
<h1>文本</h1>
</p>
<p class="section section3">
<h1>测试</h1>
<p>测试内容</p>
</p>
<p class="section section4">
<img src="csdn.jpg" title="" alt="无法正常显示" width="300px" class="per">
<h1>头像</h1>
</p>
<p class="section section5">
<p class="slide">123</p>
<p class="slide">456</p>
<p class="slide">789</p>
<p class="slide">741</p>
</p>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/vendors/scrolloverflow.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/move.js/0.5.0/move.js"></script>
<script>
$(function () {
$('#fullpage').fullpage({
sectionsColor:['#FEDA89','#DE4F50','#904A68','#68C39F','#F05183'],
anchors:['page1','page2','page3','page4','page5'],
navigation:'true',//导航
navigationPosition:'right',//导航位置
navigationTooltips:['1','2','3','4','5'],//标记
showActiveTooltip:true,
scrollOverflow:true,//超出滚动
menu:'#fullpageMenu',
slidesNavigation:true,//水平导航
controlArrows: false,//隐藏水平箭头
afterLoad:function (link,index) {
switch (index){
case 1:
move('.section1 h1').scale(1.5).end();
move('.section1 p').set('margin-top','10%').end();
break;
case 2:
move('.section2 h1').scale(0.8).end();
break;
case 3:
move('.section3 h1').set('margin-right','10%').end();
move('.section3 p').set('margin-left','10%').end();
$('.section3 h1').css('opacity','1');
$('.section3 p').css('opacity','1');
break;
case 4:
move('.section4 img').rotate(360).end(function () {
move('.section4 h1').scale(0.8).end();
});
break;
default:break;
}
},
onLeave:function (link,index) {
switch (index){
case 1:
move('.section1 h1').scale(1).end();
move('.section1 p').set('margin-bottom','10%').end();
break;
case 2:
move('.section2 h1').scale(1).end();
break;
case 3:
move('.section3 h1').set('margin-right','-10%').end();
move('.section3 p').set('margin-left','-10%').end();
$('.section3 h1').css('opacity','0.5');
$('.section3 p').css('opacity','0.5');
break;
case 4:
// move('.section4 img').rotate(-360).end(function () {
// move('.section4 h1').scale(1).end();
// });
move('.section4 img.per').rotate(-360).end();
move('.section4 h1').scale(1).end();
break;
default:break;
}
}
});
});
</script>
</body>
</html>
