Intro.js 网站演示

Posted 2020-08-09

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

 

---

下载