前端教程之Intro.js輕鬆實現新手引導效果

      在同學們使用某些網站的新版本頁面的時候，經常會出現一個類似於新手引導一樣的效果，來幫助同學們更好的熟悉新版本頁面的功能和使用，那麼你知道應該如何才能夠實現這種效果嗎？小千今天就來給大家介紹一個非常好用的外掛來實現這個效果，走過路過千萬別錯過啦。

      首先先給大家看一下最終的效果

       今天的主角Intro.js

      1、Intro.js的安裝

      Intro.js 是一個輕量級的js庫，用於建立一步一步的產品引導，支援使用鍵盤的前後方向鍵導航，使用 Enter 和 ESC 鍵推出引導，您可以透過幾個簡單的步驟安裝Intro.js

      首先我們引入下述檔案

      2、Intro.js基本使用

      接著在HTML檔案中加入基本結構

      data-step 是步驟，data-intro 是對每一步的介紹。

      最後我們加入JS程式碼就可以透過瀏覽器執行檢視效果啦(*￣︶￣)

      怎麼樣是不是已經看到效果了，接下來我們只需要美化一下就可以實現文章開頭的效果了。最後附上完整版程式碼。