漂亮的jQuery頁面嚮導插件 - Pageguide.js

轉自 給力技術

       Pageguide.js 是一個基於 jQuery 和 CSS3 實現的網頁嚮導插件，它可以幫助你快速創建網站功能的使用嚮導，便於用戶瞭解網站。它將會在頁面中生成一個“嚮導”按鈕，當你點擊按鈕時，它將會高亮顯示你所設定好的網頁內容，同時也會有文字說明。嚮導除了可以手動控制之外，你也可以將其設定爲自動播放。此插件也是非常容易使用的，只需簡單的幾步設置就能將其整合到你的網站中。合適的話就趕緊去試試吧~~

如何使用

　　首先引入 jQuery 框架和 Pageguide.js 插件

<script src="jquery.1.7.2.js"></script>
<script src="pageguide.js"></script>
<link rel="stylesheet" href="pageguide.css">

　　它會將頁面中 ul 元素裏的內容顯示爲嚮導，代碼如下

<ul id="tlyPageGuide" data-tourtitle="嚮導標題">
<li class="tlypageguide_left" data-tourtarget=".first_element_to_target">
<div>
此處顯示第一步的描述
</div>
</li>
<li class="tlypageguide_right" data-tourtarget="#second_element_to_target">
<div>
此處顯示第二步的描述
</div>
</li>
</ul>

　　最後初始化

$(document).ready(function() {
tl.pg.init();
});