pagewalkthrough.js是一个轻量级的jQuery引导页效果插件，它可以帮助我们创建一个遮罩引导层，实现页面功能引导功能，引导完成显示页面内容。

pagewalkthrough.js 引导内容支持html内容，你可以在里面加入链接、图片等信息。还有就是引导页所需的箭头图片已经打包好，直接用css调用，关于字体，你可以调用外部字体，如手写字体可能效果更好。

/* #### <a name="default-options">Options</a>
 *
 * Default options for each walkthrough.
 * User options extend these defaults.
 */
$.fn.pagewalkthrough.defaults = {
  /* Array of steps to show
   */
  steps: [
    {
      // jQuery selector for the element to highlight for this step
      wrapper: '',
      // ##### <a name="popup-options">Popup options</a>
      popup: {
        // Selector for the element which contains the content, or the literal
        // content
        content: '',
        // Popup type - either modal, tooltip or nohighlight.
        // See [Popup Types](/pages/popup-types.html)
        type: 'modal',
        // Position for tooltip and nohighlight style popups - either top,
        // left, right or bottom
        position: 'top',
        // Horizontal offset for the walkthrough
        offsetHorizontal: 0,
        // Vertical offset for the walkthrough
        offsetVertical: 0,
        // Horizontal offset for the arrow
        offsetArrowHorizontal: 0,
        // Vertical offset for the arrow
        offsetArrowVertical: 0,
        // Default width for each popup
        width: '320',
        // Amount in degrees to rotate the content by
        contentRotation: 0,
        // If set to 'skip', skips tooltip/nohighlight types when the wrapper
        // does not exist. If set to anything else, uses the value as a fallback
        // popup type (e.g. 'modal' will fallback to a popup type of 'modal').
        fallback: 'skip'
      },
      // Automatically scroll to the content for the step
      autoScroll: true,
      // Speed to use when scrolling to elements
      scrollSpeed: 1000,
      // Callback when entering the step
      onEnter: $.noop,
      /* Callback when leaving the step.  Called with `true` if the user is
       * skipping the rest of the tour (gh #66)
       */
      onLeave: $.noop
    }
  ],
  // **(Required)** Walkthrough name.  Should be a unique name to identify the
  // walkthrough, as it will
  // be used in the cookie name
  name: null,
  // Automatically show the walkthrough when the page is loaded.  If multiple
  // walkthroughs set this to true, only the first walkthrough is shown
  // automatically
  onLoad: true,
  // Callback to be executed before the walkthrough is shown
  onBeforeShow: $.noop,
  // Callback executed after the walkthrough is shown
  onAfterShow: $.noop,
  // Callback executed in the event that 'restart' is triggered
  onRestart: $.noop,
  // Callback executed when the walkthrough is closed.  The walkthrough can be
  // closed by the user clicking the close button in the top right, or
  // clicking the finish button on the last step
  onClose: $.noop,
  // Callback executed when cookie has been set after a walkthrough has been
  // closed
  onCookieLoad: $.noop,
  /* ##### <a name="controls-options">Walkthrough controls</a>
   *
   * Hash of buttons to show.  Object keys are used as the button element's ID
   */
  buttons: {
    // ID of the button
    jpwClose: {
      // Translation string for the button
      i18n: 'Click here to close',
      // Whether or not to show the button.  Can be a boolean value, or a
      // function which returns a boolean value
      show: true
    },
    jpwNext: {
      i18n: 'Next &rarr;',
      // Function which resolves to a boolean
      show: function() {
        return !isLastStep();
      }
    },
    jpwPrevious: {
      i18n: '&larr; Previous',
      show: function() {
        return !isFirstStep();
      }
    },
    jpwFinish: {
      i18n: 'Finish &#10004;',
      show: function() {
        return isLastStep();
      }
    }
  }
};

相关链接