jQuery引导插件intro.js

引导插件工具对于提高你的网站的整体用户体验真正有用,将引导您轻松创建网站的指引功能。比如网站的新手引导、业务提示、功能提示,使用也非常简单。

Intro.js 作为一个网站功能操作分布引导插件，支持使用键盘的前后方向键导航，使用 Enter 和 ESC 键退出指南。

插件安装

将intro.js 跟introjs.css 引入到你的网页中

如何使用

页面分布引导的元素设置：添加 data-intro 和 data-step 到HTML 元素中.

例如：

<div id="demo" data-step="1" data-intro="这里是分布引导的内容……" data-position="right">
这里出现第一步引导
</div>
<div id="demo" data-step="2" data-intro="这里是分布引导的内容2……" data-position="right">
这里出现第二步引导
</div>

data-intro 表示显示的内容，data-step 表示步骤顺序， data-position 表示文本框的相对位置(可选：top,left,right,bottom,bottom-left-aligned,bottom-middle-aligned,bottom-right-aligned。默认为 bottom)

就这样从 data-step从1 到最后，该插件会自动为访客一步步引导下去。

当然，最不能缺少的一步是激活引导插件：

<script type="text/javascript">
introJs().start();
</script>

以上是最基本的实现方法，还有其他高级功能（进度条效果、多页面引导等等）DEMO里面都有就不一一介绍了