jQuery页面引导插件

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

首先引入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参数配置。