1. 程式人生 > >使用fullpage.js實現全屏滾動經驗以及踩的坑

使用fullpage.js實現全屏滾動經驗以及踩的坑

全屏滑動一般用在官方網站使用較多這種效果,有很多外掛可以實現這種效果,像swiper,fullpage,iscroll等。鑑於fullpage沒用過,所以就選擇它進行嘗試一下。
首先在網上搜索fullpage.js,會搜出一大堆相關部落格,看了之後發現還是很簡單的。html中的結構就是

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div
> </div>

css只需要在head標籤內加上這句程式碼

<link href="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.css" rel="stylesheet">

js中需要這樣

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.js"
>
</script> <script type="text/javascript"> $(function(){ $('#fullpage').fullpage(); }); </script>

這樣基本上一個全屏滾動就ok了,但是現實專案需要的東西可能會更多一些,比如在官網上要有個導航的選單,每滾動一屏對應的選單出現啟用狀態。其實這種功能fullpage.js內部已經封裝好了,直接使用即可對應的html和js新增一些程式碼即可。
html:

<div id="fullpage">
<div class="section">第一屏</div> <div class="section">第二屏</div> <div class="section">第三屏</div> </div> <ul id="menu"> <li data-menuanchor='page1' class="active"> <a href="#page1">第一頁</a> </li> <li data-menuanchor='page2'> <a href="#page2">第二頁</a> </li> <li data-menuanchor='page3'> <a href="#page3">第三頁</a> </li> </ul>

每新增一屏,就新增一個div.section即可。作為導航選單的ul不管放在#fullpage裡面還是外面都對全屏滾動是沒影響的。
js:

<script>
    $(function() {
        $('#fullpage').fullpage({
            sectionsColor: ['#fff', '#fff', '#f4f5f7'],
            anchors: ['page1', 'page2', 'page3'],
            menu: '#menu',
            scrollingSpeed: 1000,
        });
    });
</script>

自己在style中給#menu li.active a新增一個啟用狀態的樣式你就能看到效果了。
ok,不出意外,現在你獲得了一個可以自定義導航選單的能夠全屏滾動的頁面。但是這時候如果設計別處心裁,最後一螢幕內容裝不下,再新增一屏又多餘,就是怎麼能隨意的改變其中一屏的高度,其實很簡單,只需要再fullpage方法中新增一個引數:scrollOverflow: true即可。當然不要忘記引入一個
<script src="https://cdn.bootcss.com/fullPage.js/2.9.5/vendors/scrolloverflow.min.js"></script>
這樣就不用擔心內容超出一屏的內容無法顯示了。可以在任意一屏隨意的溢位並能準確銜接下一螢幕的內容了。

ok,現在說說這個過程中踩過的坑吧。
1.內容溢位scrollOverflow:true設定失效問題。原因:(1)js版本不同導致的(2)scrollOverflow單詞拼寫錯誤。
2.自定義的導航選單active新增不上,啟用狀態失效。原因:(1)單詞拼寫錯誤data-menuanchor寫成了data-menuanchors,多了個s,害我找了半天沒找出原因,也是醉醉的。
ok,綜上所述,其實單詞拼寫錯誤是我大意了,沒有去看api,只是從別人的部落格中把用到的程式碼複製過來了而已,根本沒想到別人是不是拼錯了之類的。至於js版本不一樣的問題,我也看到網友有提供過這種答案,但是並沒有說清到底哪個js,那些需要什麼樣的版本,其實在http://www.bootcdn.cn/fullPage.js/這個網址裡面一看就清楚了,當jquery.fullpage.css和jquery.fullpage.js和scrolloverflow.min.js這三個版本一致的時候,我試了幾個jq版本也沒有出現問題,所以,版本要相同指的是jquery.fullpage.css ,scrolloverflow.min.js, jquery.fullpage.js這幾個js相同。

以上就是這次使用fullpage.js出現過的問題了。希望能幫到大家。也希望大家不要踩我踩過的坑吧。

相關推薦

使用fullpage.js實現滾動經驗以及

全屏滑動一般用在官方網站使用較多這種效果,有很多外掛可以實現這種效果,像swiper,fullpage,iscroll等。鑑於fullpage沒用過,所以就選擇它進行嘗試一下。 首先在網上搜索fullpage.js,會搜出一大堆相關部落格,看了之後發現還是很簡

利用fullpage.js外掛實現滾動

fullpage.js是一個基於jQuery的外掛,能幫助我們很容易的實現酷炫的全屏網站的製作。一般全屏網站用幾個很大的圖片或色塊做背景,在新增一些簡單的內容,顯得格外的高階大氣上檔次。fullpage.js支援移動裝置主要的功能有: 支援滑鼠滾動 支援前進後

好程式設計師技術分享jQuery實現類似fullpage外掛的滾動效果

開發十年,就只剩下這套架構體系了! >>>   

JS實現頁面切換

var ismoving=false;//使頁面滾動時停止監聽滾輪事件 var pageH=document.documentElement.clientHeight;//獲得當前視窗高度 var allheight=document.documentElem

JS實現和退出

直接上程式碼: //innerHTML指的是從物件的起始位置到終止位置的全部內容,包括Html標籤。//innerText 指的是從起始位置到終止位置的內容,但它去除Html標籤。 <script type="text/javascript"> function FullScreen(el)

jQuery-滾動插件【fullPage.js】API 使用方法總結

ide fixed uart 移動 alc add 兩個 電子 寬度 jQuery-全屏滾動插件fullPage.js使用方法總結   作者github及下載地址:https://github.com/alvarotrigo/fullPage.js   今天說下jQuer

學習 | jQuery滾動插件FullPage.js

arrow viewport ice char IT loop 網站 動畫 信息   簡介    fullPage.js是一個基於jQuery的全屏滾動插件,它能夠很方便、很輕松的制作出全屏網站。   主要功能 支持鼠標滾動 支持前進後退和鍵盤控制 多個回調函

jquery.fullPage.js滾動外掛的使用方法

相容性: 支援 IE8+ 及其他現代瀏覽器。 主要功能: 1.支援滑鼠滾動; 2.支援前進後退鍵盤控制; 3.多個回撥函式; 4.支援手機.移動裝置; 5.支援視窗縮放自動調整; 6.可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文字對齊

jQuery滾動外掛 FullPage.js API

引入檔案 <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <scrip

jQuery滾動外掛fullPage.js預覽

原理:window.onmousewheel 參考文件 : 酷炫的全屏製作,在網路上整理了一下,基本的方法如下: 選項                     型別      預設值        說明 verticalCentered    字串    true 

jQuery fullpage.js 滾動外掛取消滑鼠滾動事件,點選選單欄定位顯示頁面。

問題:專案中遇到一個頁面,使用了全屏滾動外掛,如下有4屏畫面。使用了 fullpage.js,現在想要取消通過滑鼠滑輪滾動來定位頁面的功能,只通過點選左側選單欄來實現的定位頁面。   (此處前提條件是,原來的滑鼠事件有效,同時點選左側選單欄也能實現定位de)

jQuery滾動外掛fullPage.js/可製作滾動網頁

fullPage.js 是 jQuery 的一個外掛,主要功能是製作出全屏網站 fullPage外掛的相容性是相容IE7瀏覽器往上 其餘主流瀏覽器就不描敘了 fullpage外掛支援以下操作 1、外掛可以使用滑鼠滑輪進行滾動 2、當豎屏的時候支援鍵盤的上下箭頭滾動  橫屏對照可以使用的是左

fullPage.js滾動外掛

fullPage.js是基於JQuery的外掛,它能夠很方便、很輕鬆的製作出全屏網站,主要功能有: 支援滑鼠滾動 多個回撥函式 支援手機、平板觸控事件 支援css3動畫 支援視窗縮放,視窗縮放時自動調整 可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文

jQuery滾動外掛fullPage.js

簡介 如今我們經常能見到全屏網站,尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景,再新增一些簡單的內容,顯得格外的高階大氣上檔次。比如 iPhone 5C 的介紹頁面(檢視),QQ瀏覽器的官網站。如果你也希望你的網站能設計成全屏的,顯得更上檔次,你可以試

滾動的原理及實現

之前用fullpage外掛做過全屏滾動的頁面,今天用js自己實現了一下,還蠻簡單的. 首先html結構為 <div id="wrap"> <div id="main"> <div id="page1" class="pa

unity怎樣實現間的切換以及設定螢幕解析度

看似是很複雜的問題,但unity已經幫我們封裝好了  Screen.fullScreen = !Screen.fullScreen;//這樣就可以實現全屏和非全屏間的切換 Screen.SetResolution(800, 600, false);//這是設定螢幕解析度的方

利用fullpage滾動外掛的使用

jQuery全屏滾動外掛FullPage.js中文幫助文件API      地址:http://www.uedsc.com/fullpage.html              http://www.uedsc.com/fullpage-introduction.html

JS如何在不同瀏覽器下實現

手動將瀏覽器全屏,大家都知道非常簡單,按F11就OK了,但如果要用JS實現瀏覽器全屏了? 對於IE瀏覽器實現全屏非常簡單,因為可以呼叫ActiveXObject物件。非IE的瀏覽器就無法辦到了,幸好,如今是html5的時代了,我們可以使用html5提供的api實現全屏功能。

經驗及技巧:用MediaElement 控制元件實現並自動旋轉至橫

如何實現搜狐視訊開始一部分螢幕播放,點選後實現全屏並自動橫屏。我剛開始思路是自己控制進行旋轉,不過最後還是有些問題。其實不用那麼麻煩,方法很簡單。只要設定MediaElement的AreTransportControlsEnabled 屬性均為true即可。AreTrans

JS 滾動 / 整翻頁

線上演示 知識點總結 當需要製作轉動滑鼠滾輪放大頁面字型這樣的互動效果時,會用到 Mousewheel 事件。其實在大多數瀏覽器(IE6, IE7, IE8, Opera 10+, Saf