hopscotch.js 介绍
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);
网站地址:http://linkedin.github.io/hopscotch/
GitHub:https://github.com/linkedin/hopscotch
网站描述:使开发人员可以轻松预览产品并添加到他们的网页
hopscotch.js
官方网站：http://linkedin.github.io/hopscotch/
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。