如何给html加引导页,jQuery实现引导页效果插件pagewalkthrough（推荐）

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

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

/* #### Options

*

* 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: '',

// ##### Popup options

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,

/* ##### Walkthrough controls

*

* 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 →',

// Function which resolves to a boolean

show: function() {

return !isLastStep();

}

},

jpwPrevious: {

i18n: '← Previous',

show: function() {

return !isFirstStep();

}

},

jpwFinish: {

i18n: 'Finish ✔',

show: function() {

return isLastStep();

}

}

}

};

相关链接