如何使用Intro.js 创建绚丽的分步指南效果

Intro.js 一款小巧的js插件，可以更好地为您的网站项目一步一步指导说明，支持使用键盘的前后方向键导航，使用 Enter 和 ESC 键推出指南。

说起js插件，我们就想起繁冗的js代码，而且下载缓慢。不过你不用担心，Intro.js十分小巧易用，只有intro.js和introjs.css两个小文件，总共不到50kB，请放心使用∩▂∩。

如何获取Intro.js

1、到官网https://github.com/usablica/intro.js/下载

2、到网志博客的百度网盘下载 http://pan.baidu.com/s/1jGFXeg2（附实例）

如何使用

1、加载文件

<script src="./intro/intro.js" type="text/javascript"></script>
<link href="./intro/introjs.css" rel="stylesheet" type="text/css" />

2) 添加 data-intro 和 data-step 到你的html元素里

例如

<div class="col-md-2" data-step="1" data-intro="网志博客logo" data-position=&#39;right&#39;><img src="/static/imghw/default1.png"  data-src="./images/logo.gif"  class="lazy"  name="logo"    style="max-width:90%" alt="">

说明：

data-step="1" --表示指引步骤，这里表示第一步

data-intro="网志博客logo"--描述内容，支持简的的html标签

data-position='right'--弹出层的方向，可以设置为left,middle和right

下面是演示效果

小结：在使用时发现，弹出层的相关按纽是英文标记的，如何按照我们的需求来改变呢，只需打开intro.js找到下面代码来修改即可。

function IntroJs(obj) {
    this.