在同學(xué)們使用某些網(wǎng)站的新版本頁面的時(shí)候，經(jīng)常會出現(xiàn)一個(gè)類似于新手引導(dǎo)一樣的效果，來幫助同學(xué)們更好的熟悉新版本頁面的功能和使用，那么你知道應(yīng)該如何才能夠?qū)崿F(xiàn)這種效果嗎？小千今天就來給大家介紹一個(gè)非常好用的插件來實(shí)現(xiàn)這個(gè)效果，走過路過千萬別錯(cuò)過啦。

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

      今天的主角Intro.js

      1、Intro.js的安裝

      Intro.js 是一個(gè)輕量級的js庫，用于創(chuàng)建一步一步的產(chǎn)品引導(dǎo)，支持使用鍵盤的前后方向鍵導(dǎo)航，使用 Enter 和 ESC 鍵推出引導(dǎo)，您可以通過幾個(gè)簡單的步驟安裝Intro.js

      首先我們引入下述文件

      2、Intro.js基本使用

      接著在HTML文件中加入基本結(jié)構(gòu)

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

      最后我們加入JS代碼就可以通過瀏覽器運(yùn)行查看效果啦(*￣︶￣)

      怎么樣是不是已經(jīng)看到效果了，接下來我們只需要美化一下就可以實(shí)現(xiàn)文章開頭的效果了。最后附上完整版代碼。

      學(xué)習(xí)web前端，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對從零基礎(chǔ)小白到web前端初級開發(fā)工程師，web前端高級開發(fā)工程師，后面的web前端大神級開發(fā)工程師都有一個(gè)明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對學(xué)習(xí)web前端開發(fā)需要掌握的知識有個(gè)清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838  加群找群管理領(lǐng)取即可，等你來哦~~