PC端如何实现页面引导

用户6379025

发布于 2022-12-26 08:11:39

72000

代码可运行

文章被收录于专栏：莫凡莫凡

运行总次数：0

代码可运行

最近有个需求想要实现页面引导，让用户知道我们PC端的页面是如何交互的

使用Jquery-pagewalkthroung 这个库在jquery 插件需要金币的，我觉得不划算，因为这个项目本身是开源的

话不多说直接上代码效果（点击此链接即可查看）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jquery-pagewalkthrough</title>
    <script src="./jquery-2.1.1.js"></script>

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

    <script
      type="text/javascript"
      src="../dist/jquery.pagewalkthrough.js"
    ></script>
    <style>
      * {
        padding: 0px;
        margin: 0px;
      }
      body {
        background-color: #141726;
      }
      .main {
        width: 1440px;
        height: 738px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
      }
      .w1,
      .w2,
      .w3,
      .w4 {
        position: absolute;
        width: 300px;
        height: 80px;
        top: 120px;
        left: 220px;
      }
      .w2 {
        top: 310px;
        left: 220px;
        width: 600px;
        height: 40px;
      }
      .w3 {
        top: 550px;
        left: 220px;
        width: 380px;
        height: 40px;
      }
      .w4 {
        top: 700px;
        left: 1240px;
        width: 100px;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="w1"></div>
      <div class="w2"></div>
      <div id="walkthrough-2">
        jQuery插件库LOGO，点击这里可以跳转到网站首页。
      </div>
      <div class="w3"></div>
      <div id="walkthrough-3">第二部演示</div>
      <div class="w4"></div>
      <div id="walkthrough-4">第三部演示</div>
      <img src="img/jq22.jpg" usemap="#Map" />
      <div id="walkthrough-5">第四部演示</div>
    </div>
    <script>
   <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jquery-pagewalkthrough</title>
    <script src="./jquery-2.1.1.js"></script>

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

    <script
      type="text/javascript"
      src="../dist/jquery.pagewalkthrough.js"
    ></script>
    <style>
      * {
        padding: 0px;
        margin: 0px;
      }
      body {
        background-color: #141726;
      }
      .main {
        width: 1440px;
        height: 738px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
      }
      .w1,
      .w2,
      .w3,
      .w4 {
        position: absolute;
        width: 300px;
        height: 80px;
        top: 120px;
        left: 220px;
      }
      .w2 {
        top: 310px;
        left: 220px;
        width: 600px;
        height: 40px;
      }
      .w3 {
        top: 550px;
        left: 220px;
        width: 380px;
        height: 40px;
      }
      .w4 {
        top: 700px;
        left: 1240px;
        width: 100px;
        height: 40px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="w1"></div>
      <div class="w2"></div>
      <div id="walkthrough-2">
        jQuery插件库LOGO，点击这里可以跳转到网站首页。
      </div>
      <div class="w3"></div>
      <div id="walkthrough-3">第二部演示</div>
      <div class="w4"></div>
      <div id="walkthrough-4">第三部演示</div>
      <img src="img/jq22.jpg" usemap="#Map" />
      <div id="walkthrough-5">第四部演示</div>
    </div>
    <script>
      $(function () {
          console.log("llllllllllllllll")
        // 设置参数
        $("body").pagewalkthrough({
          name: "introduction",
          steps: [
            {
              popup: {
                //定义弹出提示引导层
                content: "#walkthrough-1",
                type: "modal",
              },
            },
            {
              wrapper: ".w1", //当前引导对应的元素位置
              popup: {
                content: "#walkthrough-2", //关联的内容元素
                type: "tooltip", //弹出方式（tooltip和modal以及nohighlight）
                position: "bottom", //弹出层位置（top,left, right or bottom）
              },
            },
            {
              wrapper: ".w2",
              popup: {
                content: "#walkthrough-3",
                type: "tooltip",
                position: "bottom",
              },
            },
            {
              wrapper: ".w3",
              popup: {
                content: "#walkthrough-4",
                type: "tooltip",
                position: "top",
              },
            },
            {
              wrapper: ".w4",
              popup: {
                content: "#walkthrough-5",
                type: "tooltip",
                position: "top",
              },
            },
          ],
        });

        // 一步一步显示引导页
        $("body").pagewalkthrough("show");
      });
    </script>
  </body>
</html>