intro.js引导插件 - JS实战

用法

载入资源

载入两个文件，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"); 

实战演示

点击查看指引

补充

添加其他的引导样式主题

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

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

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

给指定的class添加样式

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