全屏滾動-jQuery插件實現

全屏滾動

<---好久沒寫了,這段忙了點,之後仍是每週儘可能寫點東西--->css

在不少狀況下,咱們須要頁面的全屏滾動,尤爲是移動端。今天簡要的介紹一下全屏滾動的知識。html

一.全屏滾動的原理

1.js動態獲取屏幕的高度。jquery

獲取屏幕的高度,設置每一屏幕的高度。css3

2.監聽mousewheel事件。git

監聽mousewheel事件,並判斷滾輪的方向,向上或向下滾動一屏。github

二.jQuery插件fullpages介紹

fullPage.js 是一個基於 jQuery 的插件,它可以很方便、很輕鬆的製做出全屏網站,主要功能有:web

支持鼠標滾動
支持前進後退和鍵盤控制
多個回調函數
支持手機、平板觸摸事件
支持 CSS3 動畫
支持窗口縮放
窗口縮放時自動調整
可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等數組

使用方法瀏覽器

一、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

二、HTML

<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>

每一個 section 表明一屏,默認顯示「第一屏」,若是要指定加載頁面時顯示的「屏幕」,能夠在對應的 section 加上 class=」active」,如:ide

<div class="section active">第三屏</div>

同時,能夠在 section 內加入 slide(左右滑動),如:

<div id="fullpages">
    <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>

三、JavaScript

$(function(){
    $('#fullpages').fullpage();
});

能夠進行跟多的配置:

$(document).ready(function() {
    $('#fullpages').fullpage({
        //Navigation
        menu: '#menu',
        lockAnchors: false,
        anchors:['firstPage', 'secondPage'],
        navigation: false,
        navigationPosition: 'right',
        navigationTooltips: ['firstSlide', 'secondSlide'],
        showActiveTooltip: false,
        slidesNavigation: true,
        slidesNavPosition: 'bottom',

        //Scrolling
        css3: true,
        scrollingSpeed: 700,
        autoScrolling: true,
        fitToSection: true,
        fitToSectionDelay: 1000,
        scrollBar: false,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: false,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,

        //Accessibility
        keyboardScrolling: true,
        animateAnchor: true,
        recordHistory: true,

        //Design
        controlArrows: true,
        verticalCentered: true,
        resize : false,
        sectionsColor : ['#ccc', '#fff'],
        paddingTop: '3em',
        paddingBottom: '10px',
        fixedElements: '#header, .footer',
        responsiveWidth: 0,
        responsiveHeight: 0,

        //Custom selectors
        sectionSelector: '.section',
        slideSelector: '.slide',

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
    });
});

四、配置

1)選項

選項 類型 默認值 說明
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  

2)方法

名稱 說明
moveSectionUp() 向上滾動
moveSectionDown() 向下滾動
moveTo(section, slide) 滾動到
moveSlideRight() slide 向右滾動
moveSlideLeft() slide 向左滾動
setAutoScrolling() 設置頁面滾動方式,設置爲 true 時自動滾動
setAllowScrolling() 添加或刪除鼠標滾輪/觸控板控制
setKeyboardScrolling() 添加或刪除鍵盤方向鍵控制
setScrollingSpeed() 定義以毫秒爲單位的滾動速度

3)回調函數

名稱 說明
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個參數

更多請查看官方文檔https://github.com/alvarotrigo/fullPage.js/blob/master/README.md

示例:http://www.britishairways.com/en-gb/information/travel-classes/experience-our-cabins

三.動手寫全屏滾動

這裏主要介紹監聽mousewheel事件及滾動。

因爲mousewheel事件的兼容性,引用jquery-mousewheel插件來監聽滾輪事件。

經過參數delta能夠獲取鼠標滾輪的方向和速度(舊版本須要傳delta參數,新版本不須要,直接用event取)。若是delta的值是負的,那麼滾輪就是向下滾動,正的就是向上。

// using on
$('#my_elem').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

// using the event helper
$('#my_elem').mousewheel(function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

示例:

兩屏滾動,第一屏爲屏幕高度,第二屏高度不定。js代碼以下:

//獲取屏幕高度
        var fullheight = $(window).height();
        var dis;

        //設置第一屏的高度
        $('.page1').height(fullheight);

        //監聽滾輪的mousewheel事件
        $(window).mousewheel(function(event) {
            var wst = $(this).scrollTop();
            if(wst==0&&event.deltaY<0){//下滾
                dis = fullheight;
                click_scroll(dis);
             }
            if(wst==fullheight&&event.deltaY>0){//上滾
                dis = 0;
                click_scroll(dis);
            }
          });

          //滾動
        function click_scroll(dis) {
            $("body,html").animate({
                scrollTop:dis
            },500);
         }

總結:

能夠根據需求使用fullpages實現全屏滾動(上下,左右),也可使用jquery-mousewheel定製不一樣高度的全屏滾動。

------------------------------------------------------------------------------------------------------------------------------------- 

相關文章
相關標籤/搜索