iT邦幫忙

2018 iT 邦幫忙鐵人賽
0
Modern Web

30天學習30套前端技術(2018年)系列 第 41

[十分鐘學習] fullPage.js - 全頁式導覽

example1

建立一個全頁式導覽的網站

GitHub Star: 22,000
Javascripting Overall: 88%
瀏覽器: ChromeFirefoxIE8+
RWD: 支援
License: MIT


《安裝》

  • CDN

      <!-- jQuery.js v1.11.1 -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
      <!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/vendors/jquery.easings.min.jss"></script>
    
      <!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/vendors/scrolloverflow.min.js"></script>
    
      <!-- fullPage.js v2.9.5 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.css" rel="stylesheet"  />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.js"></script>
    
  • npm

      $ npm install fullpage.js
    
  • Bower

      $ bower install fullpage.js
    

《範例》

  • 包含導覽列的全頁式導覽

      <div id="example">
      	<div class="section"><h1>A</h1></div>
      	<div class="section"><h1>B</h1></div>
      	<div class="section"><h1>C</h1></div>
      	<div class="section"><h1>D</h1></div>
      </div>
      <script>
      	$( "#example" ).fullpage({
      		// 參數設定[註1]
      		navigation: true, // 顯示導行列
      		navigationPosition: "right" // 導行列位置
      	});
      </script>
    

    [註1]

    參數 描述

    menu|自訂選單
    lockAnchors|關閉錨點
    anchors|錨點,可透過超連結的方式,連至該頁面
    navigation|顯示導行列
    navigationPosition|導行列位置
    navigationTooltips|當滑鼠移至導覽列按鈕時,顯示的提示文字,也可以透過data-tooltip,去設定
    showActiveTooltip|顯示該頁面的導覽列按鈕顯示文字
    css3|啟動CSS效果
    scrollingSpeed|滾動速度(單位:毫秒)
    autoScrolling|手動滾動時,無法停留在頁面與頁面中間
    fitToSection|手動滾動時,在頁面與頁面中間停留,會強制移到下一頁面
    fitToSectionDelay|手動滾動時,在頁面與頁面中間停留多久時間停留,會強制移到下一頁面(單位:毫秒)
    scrollBar|顯示捲軸
    easing|轉場動畫速度
    easingcss3|CSS3轉場動畫速度
    loopBottom|啟動底部循環
    loopTop|啟動頂部循環
    loopHorizontal|啟動水平循環


《延伸》

  1. fullPage.js One Page Scroll sections Site Plugin
  2. alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

上一篇
[十分鐘學習] p5.js - 繪畫套件
下一篇
[十分鐘學習] Store.js - 前端微型暫存DB
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言