网站引导插件intro.js,js引导页插件intro.js

    经常可以见到一种效果，当第一次安装某软件或者进入某网站，都会出现高亮的引导效果，如上图。
    今天要介绍的intro.js就是一款基于js的网页引导插件，具有支持六七种皮肤，使用非常方便，并且自适应屏幕的大小变化，也支持鼠标左右键的上一步、下一步切换。切换的时候，动画效果也蛮不错的。
1、下载解压本插件，将intro.js、introjs.css两个文件放到项目文件夹中，并且引用到相关页面。文件夹themes中是不同的样式，如果需要也可以引入喜欢的样式。

2、在需要高亮显示的地方书写类似下面的html代码：

<div data-step="1" data-intro="这里是步骤1!"></div>
<div data-step="2" data-intro="这里是步骤2!"></div>
<div data-step="3" data-intro="这里是步骤3!"></div>

3、另外还有两个比较有用的方法
    oncomplete 选中“跳过”按钮回调方法
    onexit选中“结束”按钮回调方法

4、调用方法：

function guide() {
    introJs().setOptions({
        prevLabel: "上一步",
        nextLabel: "下一步",
        skipLabel: "跳过",
        doneLabel: "结束"
    }).oncomplete(function () {
        //点击跳过按钮后执行的事件
    }).onexit(function () {
        //点击结束按钮后， 执行的事件
    }).start();
}

5、参数说明：

this._options = {
  /* 下一步按钮的显示名称 */
  nextLabel: 'Next →',
  /* 上一步按钮的显示名称 */
  prevLabel: '← Back',
  /* 跳过按钮的显示名称 */
  skipLabel: 'Skip',
  /* 结束按钮的显示名称 */
  doneLabel: 'Done',
  /* 引导说明框相对高亮说明区域的位置 */
  tooltipPosition: 'bottom',
  /* 引导说明文本框的样式 */
  tooltipClass: '',
  /* 说明高亮区域的样式 */
  highlightClass: '',
  /* 是否使用键盘Esc退出 */
  exitOnEsc: true,
  /* 是否允许点击空白处退出 */
  exitOnOverlayClick: true,
  /* 是否显示说明的数据步骤*/
  showStepNumbers: true,
  /* 是否允许键盘来操作 */
  keyboardNavigation: true,
  /* 是否按键来操作 */
  showButtons: true,
  /* 是否使用点点点显示进度 */
  showBullets: true,
  /* 是否显示进度条 */
  showProgress: false,
  /* 是否滑动到高亮的区域 */
  scrollToElement: true,
  /* 遮罩层的透明度 */
  overlayOpacity: 0.8,
  /* 当位置选择自动的时候，位置排列的优先级 */
  positionPrecedence: ["bottom", "top", "right", "left"],
  /* 是否禁止与元素的相互关联 */
  disableInteraction: false,
  /* 默认提示位置 */
  hintPosition: 'top-middle',
  /* 默认提示内容 */
  hintButtonLabel: 'Got it'
};

    注：在下载的压缩包中，有个“example”文件夹，您也可以参考上面的代码。