如今我們經常能看到全螢幕網站,尤其是國外玩站。這些網站用幾幅很大的圖片或色塊做背景,再添加一些簡單的內容,顯得格外的高端大氣上檔次。而JQuery的一款插件fullpage.js,可以實現全螢幕滾動,非常流行的效果,相容性IE8+相容性不錯,能夠相容於多種瀏覽器。
主要功能有:
支援滑鼠滾動
支援前進後退和鍵盤控制
多個會調函數
支援手機、平板觸控事件
支援CSS3動畫縮放調整
可設定滾動寬度、背景顏色、滾動速度、循環選項、回調、文字對齊方式等等
準備工作(下載jquery.fullPage.js和jquery.fullPage.css插件)
網址:插件下載地址(https://github.com/alvarotrigo/fullPage.js)
程式碼的外聯式引用(包括jquery-2.1.0.js)共3個
1 2 3 | <link rel= "stylesheet" type= "text/css" href= "css/jquery.fullPage.css" />
<script src= "js/jquery-2.1.0.js" type= "text/javascript" charset= "utf-8" ></script>
<script src= "js/jquery.fullPage.js" type= "text/javascript" charset= "utf-8" ></script>
|
登入後複製
1
CSS佈局
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <ul id= "fullpageMenu" ><!--ul导航栏按钮data-menuanchor为加载的页面page-->
<li data-menuanchor = "page1" class = "active" ><a href= "#page1" >section1</a></li>
<li data-menuanchor = "page2" ><a href= "#page2" >section2</a></li>
<li data-menuanchor = "page3" ><a href= "#page3" >section3</a></li>
<li data-menuanchor = "page4" ><a href= "#page4" >section4</a></li>
</ul>
<div id= "fullpage" ><!--div为容器,这里要用id名为fullpage-->
<div class = "section" ><!--默认的上下滚动页面,类名可改sectionSelector: ".section" ,不改默认类名要为section-->
<h1>这是第一屏</h1>
</div>
<div class = "section" >
<div class = "slide" >幻灯片1</div><!--默认的左右滚动幻灯片,类名可改slideSelector: ".slide" ,不改默认类名要为slide-->
<div class = "slide" >幻灯片2</div>
<div class = "slide" >幻灯片3</div>
<div class = "slide" >幻灯片4</div>
</div>
<div class = "section" >
<h1>这是第三屏</h1>
</div>
<div class = "section" >
<h1>这是第四屏</h1>
</div>
</div>
|
登入後複製
jQuery腳本(主要用fullPage.js對頁面進行參數配置可調用,這裡我沒呼叫)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <style type= "text/css" >
*{
margin: 0;
padding: 0;
}
.slide{
font-size: 60px;
text-align: center;
}
#fullpageMenu{
font-size: 30px;
position: fixed;
top: 0;
z-index: 1;
list-style: none;
}
#fullpageMenu li a{
text-decoration: none;
}
#fullpageMenu li{
background-color: mediumaquamarine;
border: 1px solid black;
padding: 8px;
cursor: pointer;
text-align: center;
}
#fullpageMenu li:hover{
background-color: orange;
}
</style>
|
登入後複製
示範效果:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持PHP中文網。
更多全螢幕滾動插件fullPage.js使用實例解析相關文章請關注PHP中文網!