参考使用教程链接：
http://www.jq22.com/jquery-info11
https://blog.csdn.net/zhang_red/article/details/43670025
fullPage.js GitHub 地址：https://github.com/alvarotrigo/fullPage.js
使用方法：
1、引入文件
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.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>
2、HTML
<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">
<div class="slide">第三屏的第一屏</div>
<div class="slide">第三屏的第二屏</div>
<div class="slide">第三屏的第三屏</div>
<div class="slide">第三屏的第四屏</div>
</div>
<div class="section">第四屏</div>
</div>
3、JavaScript
$(function(){
$('#fullpage').fullpage();
});
一个简单的滚屏例子
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>fullpage.js的基本使用</title>
<style>
body,
h3 {
margin: 0;
padding: 0;
color: #fff;
text-align: center;
font-size: 50px;
}
.section:nth-child(1) {
background-color: darkmagenta;
}
.section:nth-child(2) {
background-color: pink;
}
.section:nth-child(3) {
background-color: greenyellow;
}
.section:nth-child(4) {
background-color: blue;
}
</style>
</head>
<body>
<div id="fullpage">
<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>
<!--引入jq-->
<script src="js/jquery-1.9.1.min.js"></script>
<!--引入fullpage.js-->
<script src="js/fullpage.js"></script>
<script>
$(function(){
//fullpage是插件提供的
$('#fullpage').fullpage();
});
</script>
</body>
</html>
效果图
第一屏
第二屏
第三屏
第四屏
网友评论