jQuery蒙层引导页插件pagewalkthrough.js

所属分类：UI,其他-工具提示,独立的部件

50951 462 查看评论 (7)

分享到微信朋友圈

查看演示立即下载

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

首先引入jQuery库和pagewalkthrough插件。

<link type="text/css" rel="stylesheet" href="jquery.pagewalkthrough.css" />  
<script type="text/javascript" src="jquery.min.js"></script>  
<script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script>

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

<div class="main">
<div class="w1"></div>
      
    <div class="w2"></div>
    <div id="walkthrough-2">
                    jQuery插件库LOGO，点击这里可以跳转到网站首页。
     </div>
    <div class="w3"></div>
    <div id="walkthrough-3">
                    第二部演示
     </div>
    <div class="w4"></div>
    <div id="walkthrough-4">
                    第三部演示
    </div>    
    <div id="walkthrough-5">
                    第四部演示
    </div>
  
    <img src="img/jq22.jpg">
</div>

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