hopscotch是一个框架，使开发人员可以轻松预览产品并添加到他们的网页。hopscotch接受JSON对象作为输入，并提供开发人员来控制渲染巡演显示和管理的游览进度的api。
使用步骤
要使用hopscotch框架上手，只需包括hopscotch.css和hopscotch.js您的网页上。这将加载hopscotch对象到全局的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);
链接: https://fly63.com/nav/1664
