[awei研究室]fullpage垂直圓點導航跳頁動畫_Js

/ 分類: , / 0 則回應

標籤: , ,

可偵測螢幕大小
利用右側圓點做導航按鈕
也可利用滑鼠滾輪控制頁面

範例觀看

可偵測螢幕大小
全營幕背景捲動
背景圖1920*1200(基隆忘憂谷+潮境公園自拍)

範例觀看

1.首先要先下載jquery.fullPage.min.js
jquery.fullPage.js github完整範例下載網址：https://github.com/alvarotrigo/fullPage.js

2.html部分用div做區塊分隔

<div id=”dowebok”>
<div class=”section section1″></div>
<div class=”section section2″></div>
<div class=”section section3″></div>
<div class=”section section4″></div>
</div>

3.在</head>之前載入相關的JS檔案
<script src=”js/jquery-1.8.3.min.js”></script>
<script src=”js/jquery.fullPage.min.js”></script>
<script>
$(function(){
$(‘#dowebok’).fullpage({
sectionsColor: [‘#1bbc9b’, ‘#4BBFC3’, ‘#7BAABE’, ‘#f90’, ‘#A041FF’],
‘navigation’: true
});
});
</script>

4.可直接進去範例觀看原始碼

發表留言