PC端页面引导（使用jquery插件pagewalkthrough.js）

心已赠人 2023-08-17 16:56 110阅读 0赞

引入三个文件，路径填写自己的路径

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

参数配置意思![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70][]：

steps是一个数组，定义每一步引导调用的内容，参数wrapper定义了当前引导对应的元素位置(wrapper中的值就是css选择器)，参数popup定义弹出提示引导层，参数content定义关联的内容元素，参数type定义弹出方式，包括tooltip和modal以及nohighlight三种方式，参数position定义了弹出层位置，包括top,left, right or bottom。

我的demo项目结构：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 1][]

主要文件test2.html代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>引导</title>
        <style>
            #walkthrough-content{
                width: 100%;
                height: 100%;
            }
            #logo{
                width: 50px;
                height: 50px;
            }
        </style>
    </head>
    
    
    <link type="text/css" rel="stylesheet" href="jquery.pagewalkthrough.css" />
    
    
    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    
    <script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script>
    <body>
    <div id="walkthrough-content">
        <div id="walkthrough-1">
            <h3>欢迎来到Helloweba示例DEMO演示页</h3>
    
            <p>页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。</p>
            <p>点击下一步了解更多...</p>
        </div>
    
        
        <div id="walkthrough-2">
            <img src="images/logo.jpg" id="logo">
            这里是Helloweba网站LOGO，点击这里可以直通网站首页。
        </div>
    
        <div id="walkthrough-3">
            <div class="top_title"><a href="https://www.baidu.com/">去问问度娘吧</a></div>
            点击这里可以直接看插件的使用教程。
        </div>
    
        <div id="walkthrough-4">
            点击
            <div class="a"><a target="_blank" href="http://www.helloweba.com/down-286.html">这里</a>去下载源码，免费的哦。。</div>
        </div>
    
        <div id="walkthrough-5">
            <div id="footer"><p>sunny 2019.09.27</p>这是页脚和版权信息。</div>
    
        </div>
    
    </div>
    
    </body>
    </html>
    <script>
        $(function() {
            $('body').pagewalkthrough({
                name: 'introduction',
                steps: [{
                    popup: {
                        content: '#walkthrough-1',
                        type: 'modal'
                    }
                }, {
                    wrapper: '#logo',
                    popup: {
                        content: '#walkthrough-2',
                        type: 'tooltip',
                        position: 'right'
                    }
                }, {
                    wrapper: '.top_title a',
                    popup: {
                        content: '#walkthrough-3',
                        type: 'tooltip',
                        position: 'right'
                    }
                }, {
                    wrapper: '.a',
                    popup: {
                        content: '#walkthrough-4',
                        type: 'tooltip',
                        position: 'bottom'
                    }
                }, {
                    wrapper: '#footer p',
                    popup: {
                        content: '#walkthrough-5',
                        type: 'tooltip',
                        position: 'top'
                    }
                }]
            });
    
            // Show the tour
            $('body').pagewalkthrough('show');
        });
    
    </script>

运行效果部分截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 2][]

项目代码请点击这里下载：[https://download.csdn.net/download/sun\_of\_rainy/11833438][https_download.csdn.net_download_sun_of_rainy_11833438]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70]: /images/20230809/ab5283e29ff244ba97821d8af0bbc1a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 1]: /images/20230809/67bb6119c1304e099adec18278692e4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 2]: /images/20230809/8c1249c28a8046c8854c60dbc84661db.png
[https_download.csdn.net_download_sun_of_rainy_11833438]: https://download.csdn.net/download/sun_of_rainy/11833438