driver.js

Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。它没有依赖项，支持所有主要浏览器。

Driver.js官网：https://driverjs.com

英文文档地址：https://driverjs.com/docs/installation

Driver.js中文网（更新不及时）：https://driver.employleague.cn

gitthub地址：https://github.com/kamranahmedse/driver.js

点我体验一下

若点击无反应，请手动刷新页面后重试

Driver.js 自定义字段

这里是driver需要了解的常用选项，更多请查看官方文档。

配置含义可选参数
showProgress是否展示步数trueorfalse
overlayColor遮罩背景颜色色值or表示颜色的单词
overlayOpacity遮罩透明度0~1，默认为0.7
stagePadding选中元素和引导框的边距数值，默认为10
showButtons是否在底部显示按钮trueorfalse
nextBtnText下一步按钮的文字默认为Next
prevBtnText上一步按钮的文字默认为Previous
doneBtnText完成按钮的文字默认为done
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
27
28
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.3.1/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.3.1/dist/driver.css"/>
<script>
document.addEventListener("DOMContentLoaded", function () {
const driver = window.driver.js.driver;
const driverObj = driver({
  showProgress: true,
  overlayColor: 'black',
  overlayOpacity: 0.8,
  stagePadding: 8,
  showButtons: ['下一步', '上一步'],
  nextBtnText: '下一步', // Next button text for this step 下一步按钮的文字
  prevBtnText: '上一步', // Previous button text for this step 上一步按钮文字
  showButtons: true, // Do not show control buttons in footer 是否在底部显示按钮
  doneBtnText: '完成', // Text on the final button 完成按钮的文字
  steps: [
    { element: '元素的class', popover: { title: '标题1', description: '这是文章的第1个弹窗的标题', side: "left", align: 'start' }},
    { element: '元素的id', popover: { title: '标题2', description: '这是文章的第2个弹窗的标题', side: "bottom", align: 'start' }},
    { popover: { title: '没有选择元素', description: '整个页面都生效了' } }
  ]
});
document.getElementById('buttonId').addEventListener('click', function () {
// 启动引导
driverObj.drive();
});
});
</script>