Intro.js 網站示範

標籤：

Intro.js

為您的網站和項目提供一步一步的、更好的介紹

使用簡單

引入 js 和 css，然後在代碼中加入步驟和介紹。

快速小巧

7 KB 的 JavaScript 和 3 KB CSS，就是全部。

免費開源

免費和開源（包括商業用途），MIT許可證下。

鍵盤加滑鼠導航

滑鼠或鍵盤 ←, →, ENTER 導航，ESC 鍵退出。

線上執行個體

執行個體示範

參數說明設定多個格式 json格式：

1. key:value

複製可設定參數

1. nextLabel: "Next →",
2.             prevLabel: "← Back",
3.             skipLabel: "Skip",
4.             doneLabel: "Done",
5.             tooltipPosition: "bottom",
6.             tooltipClass: "",
7.             highlightClass: "",
8.             exitOnEsc: !0,
9.             exitOnOverlayClick: !0,
10.             showStepNumbers: !0,
11.             keyboardNavigation: !0,
12.             showButtons: !0,
13.             showBullets: !0,
14.             showProgress: !1,
15.             scrollToElement: !0,
16.             overlayOpacity: 0.8,
17.             positionPrecedence: ["bottom", "top", "right", "left"],
18.             disableInteraction: !1

複製設定方法（多個參數設定）

關鍵字：setOptions

1. introJs().setOptions({‘prevLabel‘:‘← 上一步‘,‘nextLabel‘:‘下一步 →‘,‘skipLabel‘:‘跳過‘,‘doneLabel‘:‘完成‘}).start();

複製設定方法(單個參數設定)

關鍵字：setOption

1. introJs().setOption("prevLabel","上一步").start();

複製

頁面分布引導的元素設定：

1. <div id="demo" data-step="1" data-intro="這裡是分布引導的內容……" data-position="right">
2.   </div>

複製

說明：    

1. data-step：第幾步
2. data-intro：分布引導的內容 
3. data-position：引導內容顯示位置，

複製

參數：left,right,top,bottom(不解釋)  

 

下載

 

Intro.js 網站示範