漂亮的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();
});