html引导蒙层,jQuery蒙层引导页插件pagewalkthrough.js

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

首先引入jQuery库和pagewalkthrough插件。

然后我们在#walkthrough-content加入隐藏引导内容，就是每一步展示的内容，等会用pagewalkthrough插件调用。

jQuery插件库LOGO，点击这里可以跳转到网站首页。

第二部演示

第三部演示

第四部演示

    

jQuery

pagewalkthrough插件中steps是一个数组，定义每一步引导调用的内容，下面我们讲解这几个参数。$(function() {

// 设置参数

$('body').pagewalkthrough({

name: 'introduction',

steps: [{

popup: { //定义弹出提示引导层

content: '#walkthrough-1',

type: 'modal'

}

},

{

wrapper: '.w1',

//当前引导对应的元素位置

popup: {

content: '#walkthrough-2',

//关联的内容元素

type: 'tooltip',

//弹出方式(tooltip和modal以及nohighlight)

position: 'bottom' //弹出层位置(top,left, right or bottom)

}

},

{

wrapper: '.w2',

popup: {

content: '#walkthrough-3',

type: 'tooltip',

position: 'bottom'

}

},

{

wrapper: '.w3',

popup: {

content: '#walkthrough-4',

type: 'tooltip',

position: 'top'

}

},

{

wrapper: '.w4',

popup: {

content: '#walkthrough-5',

type: 'tooltip',

position: 'top'

}

}]

});

// 一步一步显示引导页

$('body').pagewalkthrough('show');

});

pagewalkthrough.js参数配置。参数描述默认值

popup弹出提示引导层

wrapper当前引导对应的元素位置

type弹出方式(tooltip和modal以及nohighlight)tooltip

position弹出层位置(top,left, right or bottom)bottom

offsetHorizontal是否水平显示0

offsetVertical是否垂直显示0

width弹出层宽度320

contentRotation是否跳过 默认不跳过0

autoScroll??是否自动滚动true

scrollSpeed??滚动速度 单位毫秒1000

lockScrolling??是否锁定滚动 默认不锁false

onEnter??当按enter回调null

??onLeave当结束回调null