跳房子

查看演示立即下载

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

什么是跳房子？

跳房子是一个框架，使开发人员可以轻松预览产品并添加到他们的网页。跳房子接受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);

这一切就是这么简单！

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：滚动事件
下一个特效： annyang！语音识别