FullPage
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏滚动网站
基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-fullpage基本使用</title>
<link rel="stylesheet" href="css/fullpage.css">
<!--注意点: 由于fullPage.js 是一个基于 jQuery 的插件, 所以需要先引入jQuery.js-->
<script src="js/jquery-3.1.1.js"></script>
<script src="js/easings.js"></script>
<script src="js/scrolloverflow.js"></script>
<script src="js/fullpage.js"></script>
</head>
<body>
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
<script>
new fullpage('#fullpage', {
// options here
});
</script>
</body>
</html>
常用属性
new fullpage('#fullpage', {
// options here
// 设置每一屏的背景颜色
sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
// 显示指示器
navigation: true,
// 设置指示器的提示信息
navigationTooltips: ['1','2','3','4'],
// 让指示器的提示信息默认就显示
showActiveTooltip: true,
// 设置指示器显示的位置(可以是左边, 也可以是右边)
navigationPosition: 'left',
// 滚动到最后一屏或者第一屏是否要接着滚动
// loopBottom: true,
// loopTop: true,
continuousVertical: true,
});
常用回调函数
new fullpage('#fullpage', {
// 一旦某个节，过渡到新节，就会触发此回调
// 返回“false”将在移动发生之前取消移动
// origin: (Object) 起始章节相关信息
// destination: (Object) 目标章节相关信息。
// direction: (String) 它将根据滚动方向采用up或down值
onLeave (origin, destination, direction)
afterLoad (origin, destination, direction)
// 滚动结束之后，一旦加载了节，就会触发回调。参数：
// origin: (Object) 起始章节相关信息
// destination: (Object) 目标章节相关信息。
// direction: (String) 它将根据滚动方向采用up或down值。
});
常用方法
// 滚动到上一屏
fullpage_api.moveSectionUp();
// 滚动到下一屏
fullpage_api.moveSectionDown();
// 滚动到指定屏
fullpage_api.moveTo(num);
// 获取当前屏
fullpage_api.getActiveSection()
网友评论