理解滑鼠滾動事件_ZenDei技術網路在線

javascript<script> window.onload = function(){ var count = 0; document.onmousewheel = function(e){ /*滑鼠滾動的量下滾是負上滾是正*/ if(e.wheelDelta < 0){ count ++ ...

javascript
<script>
window.onload = function(){
var count = 0;
document.onmousewheel = function(e){
/*滑鼠滾動的量下滾是負上滾是正*/
if(e.wheelDelta < 0){
count ++;
}else{
count --;
}
console.log(count);
}
}
</script>
```

#### 第二步瞭解 fullpage jquery插件

> fullPage.js 是一個基於 jQuery 的插件，它能夠很方便、很輕鬆的製作出全屏網站。

下載地址 https://github.com/alvarotrigo/fullPage.js

1、使用

```html
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>fullpage</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Jesse">
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"></script>
</head>

<body>

<div id="header" style="position:fixed;top:20px;right:20px;font-size: 30px;color:#fff;">123</div>
<div id="fullpage">
<div class="section">section1</div>
<div class="section">section2</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide active"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>
<div class="section">section4</div>
<div class="section">section5</div>
</div>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
//配置項介紹
//sectionsColor為每個section設置background-color屬性
sectionsColor:['green','orange','gray','red','yellow'],
//controlArrows定義是否通過箭頭來控制slide,預設true
controlArrows:false,
//verticalCentered定義每一頁的內容是否垂直居中，預設true
verticalCentered:false,
//resize字體是否隨視窗縮放而縮放，預設false
resize:true,
//scrollingSpeed設置滾動速度，單位毫秒，預設700
scrollingSpeed:1000,
//anchors定義錨鏈接，預設為[],定義錨鏈接時，值不要和頁面中的任何ID或name相同，且不需要加#
anchors:['page1','page2','page3','page4','page5'],
//lockAnchors是否鎖定錨鏈接，預設為false,設為true後鏈接地址不會改變
// lockAnchors:true,
//easing定義頁面section滾動的動畫方式，預設為easeInOutCubic,若修改此項需引入jquery.easing插件
//css3是否使用CSS3 transforms來實現滾動效果，預設為true。若瀏覽器不支持CSS3，則會用Jquery來實現
//css3:false,
//loopTop滾動到最頂部後是否連續滾動到底部，預設為false
//loopBottom滾動到最低部後是否連續滾動到頂部，預設為false
//loopHorizontal橫向slide幻燈片是否迴圈滾動，預設為true
//autoScrolling是否使用插件的滾動方式，預設為true,若為false則會出現瀏覽器自帶滾動條
//scrollBar是否包含滾動條，預設為false,若為true瀏覽器自帶滾動條出現
//paddingTop/paddingBottom設置每一個section頂部和底部的padding,預設為0
//fixedElements固定元素，預設為null,需要配置一個jquery選擇器，在頁面滾動時，fixElements設置的元素不滾動
fixedElements:"#header",
//keyboardScrolling是否可以使用鍵盤方向鍵導航，預設為true
//touchSensitivity在移動設備中滑動頁面的敏感性，預設為5最高100，越大越難滑動
//continousVertical是否迴圈滾動，預設為false,註意這個屬性和loopTop loopBottom不相容，不能同時設置
//animateAnchor錨鏈接是否可以控制滾動動畫，預設為true,若為false則錨鏈接定位失效
//recordHistory是否記錄歷史，預設為true,通過瀏覽器的前進後退來導航。若設置autoScrolling:false,那麼這個屬性將被關閉
//menu綁定菜單，設定的相關屬性與anchors的值對應後，菜單可以控制滾動條，預設為false。可設置為菜單的jquery選擇器
//menu:"#fullpageMenu",
//navigation是否顯示導航，預設為false
navigation:true,
//navigationPosition導航小圓點的位置
navigationPosition:"right",
//navigationTooltips導航小圓點的提示，註意按順序設置
navigationTooltips:['page1','page2','page3','page4','page5'],
//showActiveTooltip是否顯示當前頁面的tooltip信息，預設為false
//slidesNavigation 是否顯示橫向幻燈片的導航，預設為false
slidesNavigation:true,
//slidesNavPosition橫嚮導航的位置，預設為bottom，可以設置為top或bottom
slidesNavPositon:"top",
//scrollOverflow內容超過滿屏後是否顯示滾動條，預設為false,如果為true則會顯示滾動條，若需滾動查看內容還需要jquery.slimscroll插件的配合
//sectionSelector:section選擇器。預設為.section
//slideSelector:slide選擇器，預設為.slide
//方法介紹
//$.fn.fullpage.***()
//moveSectionUp()向上滾動一頁
//moveSectionDown()向下滾動一頁
//moveTo(section,slide)section從1開始，slide從0開始
//silentMoveTo(section,slide)和moveTo一樣，但是沒有滾動效果
//moveSlideRight()幻燈片向右滾動
//moveSlideLeft()幻燈片向左滾動
//setAutoScrolling(boolean):動態設置autoScrolling
//setLockAnchors(boolean):動態設置lockAnchors
//setRecordHistory(boolean):動態設置recordHistory
//setScrollingSpeed(milliseconds):動態設置scrollingSpeed
//destory(type)銷毀fullpage,type可以不寫或者使用all
//reBuild()重新更新頁面和尺寸，用於ajax請求改變頁面結構後重建效果
//lazyLoading
});
});
</script>
</body>

</html>
```

2、選項

|選項|類型|預設值|解釋|
|----|----|----|----|
|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 |||

3、方法

|方法|解釋|
|----|----|
|moveSectionUp()| 向上滾動
|moveSectionDown() |向下滾動
|moveTo(section, slide)| 滾動到
|moveSlideRight() |slide 向右滾動
|moveSlideLeft() |slide 向左滾動
|setAutoScrolling() |設置頁面滾動方式，設置為 true 時自動滾動
|setAllowScrolling() |添加或刪除滑鼠滾輪/觸控板控制
|setKeyboardScrolling() |添加或刪除鍵盤方向鍵控制
|setScrollingSpeed() |定義以毫秒為單位的滾動速度

4、回調函數

|回調函數|解釋|
|----|----|
|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個參數