效果图如下,鼠标滚动可以切换div模块:
需要引用的js和css文件有(网络上的连接有时候会失效,在此给出离线的下载地址):
<link rel="stylesheet" href="css/jquery.fullPage.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>fullpage实例</title>
<link rel="stylesheet" href="css/jquery.fullPage.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script>
$(document).ready(function(){
$("#fullpage").fullpage(); //激活fullpage
})
</script>
</head>
<body>
<div id="fullpage">
<div class="section">第一层:练气</div>
<div class="section">第二层:筑基</div>
<div class="section">第三层:结丹</div>
<div class="section">第四层:元婴</div>
<div class="section">第五层:化神</div>
</div>
</body>
</html>
Demo下载地址:http://download.csdn.net/detail/u014175572/9363695
fullpage.js的cdnjs连接地址:https://cdnjs.com/libraries/fullPage.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.css
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.css
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.easings.min.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.slimscroll.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.slimscroll.min.js