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 = "";