intro.js

Intro.js 是什么？

Intro.js 是一个轻量级、无依赖的开源 JavaScript 库，专门用于为网页创建交互式新手引导、功能高亮、操作教程。它通过高亮页面元素、弹出提示框、按步骤引导的方式，帮助用户快速了解网页功能，提升产品的用户体验。

一、核心特性

  • ✅ 超轻量：压缩后仅约 10 KB，无任何外部依赖
  • ✅ 开箱即用：API 简洁，几行代码即可创建引导
  • ✅ 高度可定制：支持自定义提示框样式、位置、动画
  • ✅ 跨浏览器兼容：支持 Chrome、Firefox、Safari、Edge 等主流浏览器
  • ✅ 支持键盘导航：用户可通过键盘（←/→/ESC）控制引导流程
  • ✅ 多语言支持：内置多种语言，也可自定义文本
  • ✅ 开源免费：MIT 协议，可自由用于商业项目

二、快速上手

1. 引入 Intro.js

方式1：CDN 引入（推荐快速测试）

1
2
3
4
<!-- 引入 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@7.2.0/introjs.min.css">
<!-- 引入 JS -->
<script src="https://cdn.jsdelivr.net/npm/intro.js@7.2.0/intro.min.js"></script>

方式2：NPM 安装（工程化项目）

1
npm install intro.js --save
1
2
3
// 引入
import introJs from 'intro.js';
import 'intro.js/introjs.css';

2. 基础示例

给页面元素添加 data-intro（提示文本）和 data-step（步骤顺序）属性，然后初始化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@7.2.0/introjs.min.css">
</head>
<body>
  <h1 data-intro="这是页面标题" data-step="1">欢迎使用 Intro.js</h1>
  <button data-intro="点击这里开始操作" data-step="2">开始</button>
  <p data-intro="这是说明文本" data-step="3">这是一段示例内容</p>

  <script src="https://cdn.jsdelivr.net/npm/intro.js@7.2.0/intro.min.js"></script>
  <script>
    // 初始化并开始引导
    introJs().start();
  </script>
</body>
</html>

三、核心配置与 API

1. 常用 HTML 属性

直接在元素上添加属性，无需写 JS 即可配置：

属性 作用 示例
data-intro 提示框的文本内容 data-intro="这是第一步"
data-step 引导的步骤顺序（数字） data-step="1"
data-position 提示框相对于元素的位置 data-position="top"（可选：top/bottom/left/right/auto）
data-tooltipClass 提示框的自定义 CSS 类名 data-tooltipClass="my-custom-tooltip"
data-highlightClass 高亮元素的自定义 CSS 类名 data-highlightClass="my-highlight"

2. JavaScript 配置

通过 JS 对象配置，更灵活：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
introJs().setOptions({
  steps: [
    {
      element: '#title', // 要高亮的元素选择器
      intro: '这是页面标题', // 提示文本
      position: 'bottom' // 提示框位置
    },
    {
      element: '#btn',
      intro: '点击这里开始',
      position: 'right'
    }
  ],
  nextLabel: '下一步', // 自定义按钮文本
  prevLabel: '上一步',
  doneLabel: '完成',
  skipLabel: '跳过',
  showProgress: true, // 显示进度条
  showBullets: true, // 显示步骤圆点
  exitOnOverlayClick: true, // 点击遮罩层是否退出
  exitOnEsc: true, // 按 ESC 是否退出
  keyboardNavigation: true, // 是否支持键盘导航
  disableInteraction: false, // 是否禁用高亮元素的交互
  highlightClass: 'custom-highlight', // 自定义高亮类
  tooltipClass: 'custom-tooltip' // 自定义提示框类
}).start();

3. 常用方法

方法 作用
start() 开始引导
goToStep(stepNumber) 跳转到指定步骤（从 1 开始）
nextStep() 下一步
previousStep() 上一步
exit() 退出引导
setOptions(options) 设置配置项
refresh() 刷新引导（用于动态内容）

4. 事件监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
introJs()
  .onbeforechange(function(targetElement) {
    // 步骤切换前触发，targetElement 是当前高亮的元素
    console.log('即将切换到下一步');
  })
  .onafterchange(function(targetElement) {
    // 步骤切换后触发
    console.log('已切换到下一步');
  })
  .oncomplete(function() {
    // 引导完成时触发
    console.log('引导完成');
  })
  .onexit(function() {
    // 引导退出时触发（包括跳过和完成）
    console.log('引导退出');
  })
  .start();

四、常见使用场景

  1. 新手引导：新用户首次访问时，引导了解核心功能
  2. 功能更新提示：产品迭代后，高亮新功能，告知用户变化
  3. 操作演示：复杂功能的分步操作教程
  4. 表单引导：引导用户正确填写表单
  5. 后台管理系统：引导管理员熟悉后台功能

五、注意事项

  1. 不要过度使用：避免每次访问都弹出引导，可通过 Cookie/LocalStorage 记录用户是否已完成引导
  2. 保持简洁：提示文本要简短明了，步骤不宜过多（建议不超过 5 步）
  3. 移动端适配：Intro.js 支持移动端，但需注意提示框位置和元素大小
  4. 性能优化：避免在页面加载初期就初始化，可在用户点击“帮助”或“新手引导”按钮时再启动
  5. 自定义样式：通过 CSS 覆盖默认样式，使引导与产品风格一致

六、资源链接

Intro.js 是一个非常成熟的引导库，社区活跃，文档清晰，是网页新手引导的首选工具之一！

学无止境
intro.js
https://cszy.top/2017-02-05 intro-js/
作者
csorz
发布于
2017年2月5日
许可协议