用fullPage来实现全屏滚动效果

时间:2021-09-07 10:06:23

【注意】所有的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="#page1">page1</a></li>
<li data-menuanchor="page2"><a href="#page2">page2</a></li>
<li data-menuanchor="page3"><a href="#page3">page3</a></li>
<li data-menuanchor="page4"><a href="#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,

});