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(不解釋)  

 

---

下載