全屏滚动实现：fullPage.js和fullPage

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

fullPage.js和fullPage都能实现全屏滚动，二者差别是：fullPage.js需依赖于JQuery库，而fullPage不须要依赖不论什么一个js库。能够单独使用。

一、fullPage.js实现全屏

fullPage.js是开源的JQuery插件库，其Github地址：https://github.com/alvarotrigo/fullPage.js

1、基本演示

1.1 引入文件

<link rel="stylesheet" type="text/css" href="./fullPage.js-master/jquery.fullPage.css" />

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./fullPage.js-master/jquery.fullPage.min.js"></script>

1.2 css：引入的css并非给元素设置样式的。元素的样式须要自己写

1.3 html：每个section代码一屏，默认从第一屏显示，若须要自己定义从某屏開始显示，为section加入active类。演示样例默认从第三屏显示

<div id="ido">
<div class="section section1">
<h1>每个section是一屏，这是第一屏</h3>
</div>
<div class="section section2">
<h1>每个section是一屏，这是第二屏</h3>
</div>
<div class="section section3 active">
<h1>每个section是一屏。这是第三屏</h3>
</div>
<div class="section section4">
<h1>每个section是一屏。这是第四屏</h3>
</div>
</div>

1.4 js:

效果：http://denon-7c931.coding.io/fullpagejs.html

1.5 能够在某屏中再加入子滚动屏，借助slide类。改动上述第二个section例如以下：

<div class="section section2" style="text-align:center">
<h1 class="slide">第二屏的第一屏</h1>
<h1 class="slide">第二屏的第二屏</h1>
<h1 class="slide">第二屏的第三屏</h1>
<h1 class="slide">第二屏的第四屏</h1>
</div>

效果：http://denon-7c931.coding.io/fullpagejs.html

1.6 加入背景屏，在html加入两个section

<div class="section section5">
<h1>每个section是一屏，这是第5屏--图片背景</h3>
</div>
<div class="section section6">
<h1>每个section是一屏，这是第6屏--图片背景</h3>
</div>

加入css

.section5 { background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;}
.section6 { background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;}

效果：http://denon-7c931.coding.io/bjfull.html
（滚动到5和6屏）

1.7 循环演示：continuousVertical设置为true

$(function() {
$("#ido").fullpage(
{
continuousVertical: true
});
});

效果：http://denon-7c931.coding.io/xhfull.html （滚动到第6屏。再向下滚动时自己主动回到第一屏）

1.8 绑定菜单：加入菜单项

加入css

#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
#menu li { float: left; margin: 0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}

改动js

$(function() {
$("#ido").fullpage(
{
continuousVertical: true, //循环演示
//绑定菜单
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu', });
});

效果：http://denon-7c931.coding.io/memufull.html

1.9 导航演示：设置’navigation': true,

$(function() {
$("#ido").fullpage(
{
continuousVertical: true, //循环演示
//绑定菜单
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu', // 导航
'navigation': true,
});
});

效果：http://denon-7c931.coding.io/navfull.html （导航在右側）

2、配置如图

假设须要配置easing和scrollOverflow，则须要引入额外的js（在vendors文件夹下）

<script type="text/javascript" src="./fullPage.js-master/vendors/jquery.easings.min.js"></script>

<script type="text/javascript" src="./fullPage.js-master/vendors/jquery.slimscroll.min.js"></script>

二、fullPage实现全屏

fullPage 是一款不依赖不论什么 js 库的全屏滚动组件，支持垂直/水平滚动、CSS3 旋转/缩放动画，支持 IE5.5+。支持移动设备。其Github地址：https://github.com/powy1993/fullpage

1、基本演示

<script type="text/javascript" src="./fullpage-master/js/fullPage.min.js"></script>

1.1 垂直滚动

css

body {
width: 100%;
*cursor: default;
overflow: hidden;
font: 16px/1.5 "Microsoft YaHei";
}
div,p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#pageContain {
overflow: hidden;
}
.page {
display: none;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.contain {
width: 100%;
height: 100%;
display: none;
position: relative;
z-index: 0;
}
.current .contain,.slide .contain {
display: block;
}
.current {
display: block;
z-index: 1;
}
.slide {
display: block;
z-index: 2;
}
.page1 {
background: #37c1e3;
}
.page2 {
background: #009922;
}
.page3 {
background: #992211;
}
.page4 {
background: #ff00ff;
}
.page5 {
background: #00ff00;
}
.page6 {
background: #22ffff;
}
#navBar {
z-index: 3;
position: absolute;
top: 10%;
right: 3%;
}
#navBar .active {
background: #ccc;
}
#navBar li {
cursor: pointer;
margin-bottom: 10px;
transition: all .7s ease;
border-radius: 50%;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
}
h1
{
text-align: center;
margin-top: 20%;
}

html

var runPage;
runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
effect: {
transform: {
translate: 'Y' //垂直滚动。改为X则是水平滚动
},
opacity: [0, 1]
},
mode: 'wheel, touch, nav:navBar',
easing: 'ease'
});

效果：http://denon-7c931.coding.io/fullpage.html

1.2 css3动画：改动js即可

var runPage;
runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
effect: {
transform: {
translate: 'X',
scale: [0, 1],
rotate: [270, 0]
},
opacity: [0, 1]
},
mode: 'wheel, touch, nav:navBar',
easing: 'ease'
});

效果：http://denon-7c931.coding.io/fulldh.html

1.3 自己主动滚动，js改动例如以下

var runPage, interval, autoPlay; autoPlay = function(to) {
clearTimeout(interval);
interval = setTimeout(function() {
runPage.go(to);
}, 1000);
}
runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
effect: {
transform: {
translate: 'X',
scale: [0, 1],
rotate: [270, 0]
},
opacity: [0, 1]
},
mode: 'wheel, touch, nav:navBar',
easing: 'ease',
callback: function(index, thisPage){
index = index + 1 > 3 ? 0 : index + 1;
autoPlay(index);
}
});
interval = setTimeout(function() {
runPage.go(runPage.thisPage() + 1);
}, 1000);