步骤引导插件：pagewalkthrough实例

插件作用：基于jquery的步骤引导插件

　　我也是在网上看到案例，然后通过自己的修改，更加加深了对该插件的理解与用法，下面直接上代码：

　　setp1. 引入jquery和pagewalkthrough插件　　

 

<link rel="stylesheet" href="css/jquery.pagewalkthrough.css">

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script>

 

　　step2.html部分要展示的页面内容代码：

<div class="con">

    <img src="1.jpg" alt="">



    <div class="pz con1"></div>

    <div class="pz con2"></div>

    <div class="pz con3"></div>

    <div class="pz con4"></div>

</div>

　　step3.步骤引导需要显示的html代码(注意这部分代码是隐藏的)：

<div id="walkthrough-content" style="display:none;">

    <div id="walkthrough-1">

        <h3>欢迎来到Helloweba演示页--Imever</h3>

    </div>



    <div id="walkthrough-2">

        这里是我的博客名

    </div>



    <div id="walkthrough-3">

        这里是导航

    </div>



    <div id="walkthrough-4">

        这里是我喜欢的林依晨

    </div>



    <div id="walkthrough-5">

        这里是文章列表

    </div>

</div>

　　step4.对以上的html部分进行美化，即css部分：

.con{

        width: 500px;

        height: 500px;

        overflow: hidden;

        margin: 40px auto;

        position: relative;

    }

    .con img{

        width: 100%;

        display: block;

    }

    

    .pz{

        position: absolute;

        /*background-color: rgba(23,43,33,.5);*/

    }

    .con1{

        width: 100px;

        height: 30px;

        top: 6px;

        left:205px;

    }

    .con2{

        width: 200px;

        height: 30px;

        top: 90px;

        left:0px;

    }

    .con3{

        width: 150px;

        height: 150px;

        top: 110px;

        left:380px;

    }

    .con4{

        width: 150px;

        height: 50px;

        top: 110px;

        left:0px;

    }

View Code

　　step5.jquery调用

<script>

$(function() {

    // Set up tour

    $('body').pagewalkthrough({

        name: 'introduction',

        steps: [{

           popup: {

               content: '#walkthrough-1',

               type: 'modal'

           }

        },  {

            wrapper: '.con1',

            popup: {

                content: '#walkthrough-2',

                type: 'tooltip',

                position: 'bottom'

            }

        }, {

            wrapper: '.con2',

            popup: {

                content: '#walkthrough-3',

                type: 'tooltip',

                position: 'bottom'

            }

        },{

            wrapper: '.con3',

            popup: {

                content: '#walkthrough-4',

                type: 'tooltip',

                position: 'left'

            }

        },{

            wrapper: '.con4',

            popup: {

                content: '#walkthrough-5',

                type: 'tooltip',

                position: 'bottom'

            }

        }]

    });



    // Show the tour

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

});

</script>

View Code

下面给我本demo的运行结果：

如果有助于你的学习就给我点赞吧！