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

---

下载