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参数配置。