使用intro.js实现简单下一步引导demo

拼命_小李2025-12-31 12:35

1、需求

部分产品为了客户更好的使用体验和新手的快速入门，web系统需要使用引导的方式来引导用户快速上手产品功能，当前主流组件有两种，intro.js和driver.js，两者各有优势，今天我们使用intro.js来快速实现一个引导demo。

2、代码

html 复制代码

<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/7.2.0/intro.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/7.2.0/introjs.css">

</head>
<body>
<div  class="card-demo">
<div id="first">1111111111111111</div>
<div id="second">22222222222222</div>
</div>
</body>
<script>
introJs().setOptions({
  steps: [
    {
      element: document.querySelector('#first'),
	  title:"11",
      intro: "这是第一步的引导内容。"
    },
    {
      element: document.querySelector('#second'),
	  title:"22",
      intro: "这是第二步的引导内容。"
    }
  ]
})
.setOption("nextLabel", " 下一步 ")
      .setOption("prevLabel", " 上一步 ")
      .setOption("doneLabel", " 完成 ")
.start();

</script>
</html>

效果图如下：