跳房子

所属分类：UI-工具提示

30695 334 查看评论 (1)

分享到微信朋友圈

查看演示立即下载

插件描述：跳房子是一个框架，使开发人员可以轻松预览产品并添加到他们的网页

什么是跳房子？

跳房子是一个框架，使开发人员可以轻松预览产品并添加到他们的网页。跳房子接受JSON对象作为输入，并提供开发人员来控制渲染巡演显示和管理的游览进度的API。

使用步骤

要使用跳房子框架上手，只需包括hopscotch.css和hopscotch.js您的网页上。这将加载跳房子对象到全局的window对象。

<html>
      <head>
        <title>My First Hopscotch Tour</title>
        <link rel="stylesheet" href="css/hopscotch.css"></link>
      </head>
      <body>
        <h1 id="header">My First Hopscotch Tour</h1>
        <div id="content">
          <p>Content goes here...</p>
        </div>
        <script src="js/hopscotch.js"></script>
        <script src="js/my_first_tour.js"></script> <!-- define and start your tour in this file -->
      </body>
</html>

然后在你的my_first_tour.js文件中，定义并启动您的游览。

// Define the tour!
    var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "My Header",
          content: "This is the header of my page.",
          target: "header",
          placement: "right"
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };

    // Start the tour!
    hopscotch.startTour(tour);

这一切就是这么简单！

annyang！语音识别

滚动事件