jQuery页面引导插件

收藏

用户第一次使用产品时需要建立一个使用向导，引导用户如何使用产品，比如使用演示的方式逐一介绍界面上的功能模块，从而提升了用户体验和产品的亲和力。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

首先引入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 id="walkthrough-content"> 
   <div id="walkthrough-1"> 
    <h3>欢迎来到素材火示例DEMO演示页</h3> 
    <p>页面功能介绍引导页的效果是通过一款叫做<a href="https://github.com/jwarby/jquery-pagewalkthrough" target="_blank">pagewalkthrough.js</a>的jQuery插件实现的。</p> 
    <p>点击下一步了解更多...</p> 
   </div> 
   <div id="walkthrough-2">
     这是素材火官网LOGO，点击这里可以跳转到网站首页。 
   </div> 
   <div id="walkthrough-3">
     点击这里可以查看该插件的使用教程。 
   </div> 
   <div id="walkthrough-5">
     这是页脚和版权信息。 
   </div> 
</div>

jQuery

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

$(function() {
    // 设置参数
    $('body').pagewalkthrough({
        name: 'introduction',
        steps: [{
            popup: { //定义弹出提示引导层
                content: '#walkthrough-1',
                type: 'modal'
            }
        },
        {
            wrapper: '.logo',//当前引导对应的元素位置
            popup: {
                content: '#walkthrough-2',//关联的内容元素
                type: 'tooltip',//弹出方式（tooltip和modal以及nohighlight）
                position: 'bottom' //弹出层位置（top,left, right or bottom）
            }
        },
        {
            wrapper: '.title',
            popup: {
                content: '#walkthrough-3',
                type: 'tooltip',
                position: 'bottom'
            }
        },
        {
            wrapper: '.foot',
            popup: {
                content: '#walkthrough-5',
                type: 'tooltip',
                position: 'top'
            }
        }]
    });

    // 一步一步显示引导页
    $('body').pagewalkthrough('show');
});

pagewalkthrough.js参数配置。