Intro.js的簡介和用法


Intro.js 是用於向首頁使用網站或者移動應用添加漂亮的分布指南效果,引導用戶的js框架。支持使用鍵盤的前后方向鍵導航,使用 Enter 和 ESC 鍵推出指南。Intro.js 是 GitHub 上的開源項目,目前僅支持 Chrome、Firefox、Safari 瀏覽器,其它瀏覽器的兼容已加入 Roadmap 中。

Intro.js演示: 在線演示 Intro.js下載: 你可以從開源項目網站 github 上獲取到最新的源碼 轉到 github intro.js 源碼頁面 從 CDN官網上下載最新的版本, 點擊下載

將第二步下載到的 intro.js 加入到你的項目中,在你項目的 UI 頁面中引入 intro.js 腳本 introjs.css 樣式
在 hmtl 元素的標簽中引用 data-intro 和 data-step屬性,例如:

<a href='http://google.com/'
data-intro='Hello step one!'></a>

然后引用以下js 函數 : introJs().start();
如果想定位到指定的位置,可以這樣寫:
introJs(".divtest").start();
這就會定位到 class 屬性為 divtest 的標簽。

運行效果如下:

 

演示源碼下載:

下載源碼 密碼: 3a0o


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM