理解鼠標滾動事件

時間 2019-11-08

標籤理解鼠標滾動事件简体版

原文原文鏈接

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

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

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

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

一、使用jquery

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

<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>git

<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>github

</html>
```web

二、選項ajax

|選項|類型|默認值|解釋|
|----|----|----|----|
|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個參數

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。