fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。
主要功能有:
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等(转载)
第一步:
fullpage.js 下载地址
https://github.com/alvarotrigo/fullPage.js
进入下载页面之后点击红色框然后选择第二个选项。
第二步:
将下载的压缩包进行解压,然后把js和css文件夹放入自己的项目中
第三步:引用js和css文件
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery-1.8.3.min.js"></script>
<!-- jquery.easings.min.js 是必须的,用于 easing 参数,也可以使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.min.js"></script>
<!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
然后就可以正常的使用了。
注意jq的版本必须要在1.8以上。
下面是一个简单的列子:(官方提供的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/jquery.fullPage.css" />
</head>
<body>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
</div>
<div class="section">
<h3>第二屏</h3>
</div>
<div class="section">
<div class="slide">第三屏的第一屏</div>
<div class="slide">第三屏的第二屏</div>
<div class="slide">第三屏的第三屏</div>
<div class="slide">第三屏的第四屏</div>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script>
$(function () {
$("#dowebok").fullpage({
sectionsColor:['#c2e5ff','#ccc','#7babff','#f40'],
});
});
</script>
</body>
</html>