您当前位于：插件API应用 ——> jQuery全屏滚动插件 fullPage.js

jQuery全屏滚动插件 fullPage.js

2015/04/28 17:31:37 | 作者：HTML5学堂（码匠） | 分类：插件API应用 | 关键词：fullPage,单屏滚动,全屏滚动,滚动插件

jQuery全屏滚动插件fullPage.js

HTML5学堂：2014年，除了继续“扁平化”之外，网页设计的天平开始逐渐的向全屏类网站倾斜，运应而生的就是前端对全屏类网站的基本实现。基于jQuery的全屏类插件有不少，我们在使用过几个之后，发现fullpage.js相对使用较为方便。发出来与大家分享一下~

fullPage.js插件简介

fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站。

fullPage.js功能简介

支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

fullPage.js单屏滚动效果

fullPage.js使用步骤

首先引入必要文件：

reset.css
jquery.fullPage.css
jquery.fullPage.min.js
jquery-1.8.3.min.js
jquery-ui-1.10.3.min.js

文件下载地址：http://yunpan.cn/QCxWCXe7f52Yw (访问密码：73a1)

欢迎沟通交流~HTML5学堂

单屏滚动效果如下：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="jquery.fullPage.css">
<link rel="stylesheet" href="reset.css">
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery-ui-1.10.3.min.js"></script>
<script src="jquery.fullPage.min.js"></script>
<style>
/*自定义导航栏*/
.nav {
position: fixed;
left: 10px;
top: 10px;
}
.nav a,
.nav li {
float: left;
}
.nav li {
margin-right: 5px;
}
.nav a {
padding: 10px 20px;
background: #fff;
color: #4BBFC3
text-decoration: none;
}
/*选中跳转栏目的效果*/
.nav .active a{
background: #333;
}
.section {
overflow: hidden;
color: #fff;
font: 50px "Microsoft Yahei";
text-align: center;
}
</style>
<script>
$(document).ready(function() {
$.fn.fullpage({
// 设置每一屏的背景颜色
'slidesColor': ['#999', '#4BBFC3', '#7BAABE', '#f90','#1bbc9b', '#4BBFC3', '#7BAABE','#f90'],
// 定义锚链接
'anchors': ['page1', 'page2', 'page3', 'page4','page5','page6','page7','page8'],
// 是否使用 CSS3 transforms 滚动,设置为true自定义导航栏才能显示
'css3': true,
// 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
'menu' : '.nav',
// 字体是否随着窗口缩放而缩放
'resize': true,
// 滚动速度，单位为毫秒,默认为700
'scrollingSpeed': 800
});
});
</script>
</head>
<body>
<ul id='menu' class='nav'>
<li data-menuanchor="page1"><a href="#page1" class='active'>第1个项目</a></li>
<li data-menuanchor="page2"><a href="#page2">第2个项目</a></li>
<li data-menuanchor="page3"><a href="#page3">第3个项目</a></li>
<li data-menuanchor="page4"><a href="#page4">第4个项目</a></li>
<li data-menuanchor="page5"><a href="#page5">第5个项目</a></li>
<li data-menuanchor="page6"><a href="#page6">第6个项目</a></li>
<li data-menuanchor="page7"><a href="#page7">第7个项目</a></li>
<li data-menuanchor="page8"><a href="#page8">第8个项目</a></li>
</ul>
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 【梦幻雪冰】基本演示</p>
</div>
<div class="section">
<div class="slide"><h3>第二屏的第一屏</h3></div>
<div class="slide"><h3>第二屏的第二屏</h3></div>
<div class="slide"><h3>第二屏的第三屏</h3></div>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
<div class="section">
<h3>第五屏</h3>
</div>
<div class="section">
<h3>第六屏</h3>
</div>
<div class="section">
<h3>第七屏</h3>
</div>
<div class="section">
<h3>第八屏</h3>
<p>这是最后一屏：【梦幻雪冰】</p>
</div>
</body>
</html>

！注意

【1】结构中的div的类名为“section”，因为 jquery.fullPage.css样式已经为大家写好了
【2】JavaScript代码要写在head里面，不然会出现文本内容不能居中和滚动效果出现问题
【3】为了实现字体随着窗口缩放而缩放，字体大小中属性值的单位不要用px而是用em
【4】设置导航栏，要定义导航栏的id或者是类名，绑定到menu属性里面(#menu或者.menu)，用data-menuanchor设置选中要跳转的栏目或者用data-index（设置active类名）
【5】为了防止在滚动栏目底部显示下一个栏目的问题，可以在.section类选择器里面添加一句overflow：hidden；就可以解决该问题了。