首页 > 代码库 > 用fullPage来实现全屏滚动效果
用fullPage来实现全屏滚动效果
【注意】所有的page要用div包裹，id为fullpage.不能直接包在body中
【使用fullpage的步骤】
1、导入 JQuery.js,fullpage.js,fullpage.css <!-- fullPage.js 必须在 JQuery.js 之后导入，否则无效 -->
2、组建网页布局，最外层 id=fullpage 单页class=section 幻灯片 class="slide"
3、JS中使用$(“#fullpage").fullpage();调用执行
【代码如下】
《css样式部分》
<style type="text/css">
.section1{
background-color: yellowgreen;
}
.section2{
background-color: deepskyblue;
}
.section3{
background-color: tomato;
}
.section4{
background-color: cadetblue;
}
#menu{
position: fixed;/*生成绝对定位的元素，相对于浏览器窗口进行定位*/
left: 20px;
top: 10px;
z-index: 999;/*不被覆盖，显示在最外层*/
padding: 0px;
}
#menu li{
float: left;
list-style: none;
width: 80px;
height: 25px;
line-height: 25px;
margin: 0px 5px;
text-align: center;
background-color: #BCBCBC;
border-radius: 7px;
}
#menu li a{
text-decoration: none;
color: white;
}
</style>
《body部分》
<body>
<ul id="menu">
<!--data-menuanchor是设置要选中的栏目-->
<li data-menuanchor="page1"><a href="http://www.mamicode.com/#page1">page1</a></li>
<li data-menuanchor="page2"><a href="http://www.mamicode.com/#page2">page2</a></li>
<li data-menuanchor="page3"><a href="http://www.mamicode.com/#page3">page3</a></li>
<li data-menuanchor="page4"><a href="http://www.mamicode.com/#page4">page4</a></li>
</ul>
<!--所有page要用div包裹，id为fullpage。不能直接包在body中-->
<div id="fullpage" >
<!-- 所有的单页，class为section -->
<div class="section section1">page1</div>
<div class="section section2">
<div class="slide">page2-1</div>
<div class="slide">page2-2</div>
<div class="slide">page2-3</div>
</div>
<div class="section section3">page3</div>
<div class="section section4">page4</div>
</div>
</body>
《js部分》
<script type="text/javascript">
$(function(){/*文档准备函数*/
/*添加完单页后，需调用.fullpage()方法，才能生效*/
$("#fullpage").fullpage({
anchors: [‘page1‘, ‘page2‘, ‘page3‘, ‘page4‘],
menu:"#menu",
navigation:true,
});
用fullPage来实现全屏滚动效果