使用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