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