Npcink Blog
切换菜单

intro.js 引导插件 - JS 实战

intro.js 引导插件实战详解

最后更新于
本页目录12 节

用法

载入资源

载入两个文件，intro.js 和 introjs.css

使用

您需要一个开关

<a href="javascript:void(0);" onclick="javascript:introJs().start();">点击查看指引</a>

配置

有两个属性需要配置

  • data-step：显示顺序（纯数字）
  • data-intro：提示文本（HTML）
  <div data-step="1" data-intro="这里是步骤1!">2</div>
  <div data-step="2" data-intro="这里是步骤2!">3</div>

补充

  • data-position：分步引导的内容所在的位置，
  • 如右侧：right 左侧：left 上方：top 下方：bottom

简单的演示

查看演示

添加图片

单纯的文本提示着实单调，加上图片

  <div data-step="1" data-intro="这里是步骤1!<img src=./img/npcink.png>">2</div>

查看演示

如上所示，在 data-intro 提示文本中，可以使用 HTML 标签

实战

上面这些都太理想了，在实际运用中，怎么会这么简单，先来看一段经典的 HTML 代码：

<div class="n-210105-3">
    <div class="n-bg">
      <div class="n-bg-d">
        <div class="n-main">
          <span class="n-ico">
            @@@
            <p>专属内容</p>
          </span>
          <p class="n-meat">您需要入圈之后才能查看帖子内容</p>
          <div class="n-button">现在加入</div>
        </div>
      </div>
    </div>
  </div>

一个问题，怎么给我们需要的标签添加属性呢？

我们可以通过下面这个 JS 方法来给指定的标签添加属性

document.querySelector(".n-ico p").setAttribute('data-step', "1");

实战演示

原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。

<a onclick="javascript:introJs().start();" target="_top" rel="noopener">点击查看指引</a>
<!--载入CSS样式-->
  <link href="https://cdn.getimg.net/npc/2021/file/page/0108/style-3.css" rel="stylesheet" type="text/css">
<div class="n-210105-3">
    <div class="n-bg">
      <div class="n-bg-d">
        <div class="n-main">
          <span class="n-ico">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <rect data-fill="1" data-stroke="1" height="12" rx="1.5" stroke-linecap="round" stroke-linejoin="round" width="14.67" x="5" y="10"></rect>
              <path d="M7.667 10V6.667a4.667 4.667 0 1 1 9.333 0V10M12.333 14.667v2.666" data-stroke="1" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <p>专属内容</p>
          </span>
          <p class="n-meat">您需要入圈之后才能查看帖子内容</p>
          <div class="n-button">现在加入</div>
        </div>
      </div>
    </div>
  </div>
<script>
document.querySelector(".n-ico svg").setAttribute('data-step', "1");
document.querySelector(".n-ico svg").setAttribute('data-intro', "这里是<b>锁</b>");


document.querySelector(".n-ico p").setAttribute('data-step', "2");
document.querySelector(".n-ico p").setAttribute('data-intro', "这里是标题");




document.querySelector(".n-button").setAttribute('data-step', "3");
document.querySelector(".n-button").setAttribute('data-intro', "这里是按钮");
</script>

补充

添加其他的引导样式主题

在您文章开头您下载的资源中，有一个名为 themes 的文件夹，里面的 CSS 文件就是主题，载入其中不同的 CSS 文件，即可实现不同的外观。

触发引导的同时触发一个 JS 函数

<a onclick="n_start();javascript:introJs().start();">使用指南</a>

给指定的 class 添加样式

document.querySelector(".po-topic-circle").style.display = "";