用fullPage來實現全屏滾動效果

【注意】全部的page要用div包裹,id爲fullpage.不能直接包在body中javascript

【使用fullpage的步驟】css

 一、導入 JQuery.js,fullpage.js,fullpage.css  <!-- fullPage.js 必須在 JQuery.js 以後導入,不然無效 -->java

   二、組建網頁佈局,最外層 id=fullpage 單頁class=section 幻燈片 class="slide"瀏覽器

   三、JS中使用$(「#fullpage").fullpage();調用執行ide

【代碼以下】函數

《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>ip

《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>it

《js部分》

<script type="text/javascript">

$(function(){/*文檔準備函數*/
/*添加完單頁後,需調用.fullpage()方法,才能生效*/
$("#fullpage").fullpage({

                                       anchors: ['page1', 'page2', 'page3', 'page4'],

                                       menu:"#menu",

                                       navigation:true,

});

相關文章
相關標籤/搜索