H5C3全屏案例
1. 實現通過滾輪，完成全屏切換。
1.1 FullPage插件
- 插件功能介紹
- 基於 jQuery 的插件，它能夠幫你很方便、很輕鬆的製作出全屏網站。
- 支持鼠標滾動，支持前進後退和鍵盤控制，多個回調函數，
支持手機、平板觸摸事件，支持 CSS3 動畫，支持窗口縮放，窗口縮放時自動調整，
可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等。
- 參考文檔：http://www.dowebok.com/demo/2014/77/
- 滾動滑屏的原理：window.onmousewheel = function(){ console.log(‘ok’) };
- 在瀏覽器的控制檯寫上上述代碼，進行測試即可。
- 使用步驟
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">
<div class="slide">第三屏的第一屏</div>
<div class="slide">第三屏的第二屏</div>
<div class="slide">第三屏的第三屏</div>
<div class="slide">第三屏的第四屏</div>
</div>
<div class="section">第四屏</div>
</div>
$(function(){
$('#fullpage').fullpage();
});
- 配置
| 選項 |
類型 |
默認值 |
說明 |
| verticalCentered |
字符串 |
true |
內容是否垂直居中 |
| resize |
布爾值 |
false |
字體是否隨着窗口縮放而縮放 |
| slidesColor |
函數 |
無 |
設置背景顏色 |
| anchors |
數組 |
無 |
定義錨鏈接 |
| scrollingSpeed |
整數 |
700 |
滾動速度，單位爲毫秒 |
| easing |
字符串 |
easeInQuart |
滾動動畫方式 |
| menu |
布爾值 |
false |
綁定菜單，設定的相關屬性與 anchors 的值對應後，菜單可以控制滾動 |
| navigation |
布爾值 |
false |
是否顯示項目導航 |
| navigationPosition |
字符串 |
right |
項目導航的位置，可選 left 或 right |
| navigationColor |
字符串 |
#000 |
項目導航的顏色 |
| navigationTooltips |
數組 |
空 |
項目導航的 tip |
| slidesNavigation |
布爾值 |
false |
是否顯示左右滑塊的項目導航 |
| slidesNavPosition |
字符串 |
bottom |
左右滑塊的項目導航的位置，可選 top 或 bottom |
| controlArrowColor |
字符串 |
#fff |
左右滑塊的箭頭的背景顏色 |
| loopBottom |
布爾值 |
false |
滾動到最底部後是否滾回頂部 |
| loopTop |
布爾值 |
false |
滾動到最頂部後是否滾底部 |
| loopHorizontal |
布爾值 |
true |
左右滑塊是否循環滑動 |
| autoScrolling |
布爾值 |
true |
是否使用插件的滾動方式，如果選擇 false，則會出現瀏覽器自帶的滾動條 |
| scrollOverflow |
布爾值 |
false |
內容超過滿屏後是否顯示滾動條 |
| css3 |
布爾值 |
false |
是否使用 CSS3 transforms 滾動 |
| paddingTop |
字符串 |
0 |
與頂部的距離 |
| paddingBottom |
字符串 |
0 |
與底部距離 |
| fixedElements |
字符串 |
無 |
|
| normalScrollElements |
|
無 |
|
| keyboardScrolling |
布爾值 |
true |
是否使用鍵盤方向鍵導航 |
| touchSensitivity |
整數 |
5 |
|
| continuousVertical |
布爾值 |
false |
是否循環滾動，與 loopTop 及 loopBottom 不兼容 |
| animateAnchor |
布爾值 |
true |
|
| normalScrollElementTouchThreshold |
整數 |
5 |
- |
| 名稱 |
說明 |
| moveSectionUp() |
向上滾動 |
| moveSectionDown() |
向下滾動 |
| moveTo(section, slide) |
滾動到 |
| moveSlideRight() |
slide 向右滾動 |
| moveSlideLeft() |
slide 向左滾動 |
| setAutoScrolling() |
設置頁面滾動方式，設置爲 true 時自動滾動 |
| setAllowScrolling() |
添加或刪除鼠標滾輪/觸控板控制 |
| setKeyboardScrolling() |
添加或刪除鍵盤方向鍵控制 |
| setScrollingSpeed() |
定義以毫秒爲單位的滾動速度 |
| 名稱 |
說明 |
| afterLoad |
滾動到某一屏後的回調函數，接收 anchorLink 和 index 兩個參數，anchorLink 是錨鏈接的名稱，index 是序號，從1開始計算 |
| onLeave |
滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數：index 是離開的“頁面”的序號，從1開始計算；nextIndex 是滾動到的“頁面”的序號，從1開始計算；direction 判斷往上滾動還是往下滾動，值是 up 或 down。 |
| afterRender |
頁面結構生成後的回調函數，或者說頁面初始化完成後的回調函數 |
| afterSlideLoad |
滾動到某一水平滑塊後的回調函數，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個參數 |
| onSlideLeave |
某一水平滑塊滾動前的回調函數，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個參數 |
搭建頁面開發結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>購物網站宣傳頁面</title>
<link rel="stylesheet" href="css/jquery.fullpage.min.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="more"><img src="images/00-more.png" alt=""></div>
<div class="container">
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullpage.min.js"></script>
<script>
$(function() {
$('.container').fullpage();
})
</script>
