hopscotch.js 介绍
hopscotch是 一个 框架，使开发人员可以轻松预览产品并 添加 到他们的网页。hopscotch接受jsON对象作为输入，并提供开发人员来控制渲染巡演 显示 和管理的游览进度的API。
使用步骤
要使用hopscotch框架上手，只需 包括 hopscotch.css和hopscotch.js您的网页上。这将加载hopscotch对象到全局的window对象。
<html>
<head>
<title>My F irs t Hopscotch Tour</title>
<link rel="stylesheet" href="css/hopscotch.css"></link>
</head>
<body>
<h1 id="header">My F irs t Hopscotch Tour</h1>
<div id="content">
<p>Content goes here...</p>
</div>
<script src="js/hopscotch.js"></script>
<script src="js/my_f irs t_tour.js"></script> <!-- define and start your tour in this file -->
</body>
</html>
然后在你的my_f irs t_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: "b ott om"
}
]
};
// Start the tour!
hopscotch.startTour(tour);
网站地址 : http://linkedin.github.io/hopscotch/
GitHub: https://github.com/linkedin/hopscotch
网站描述: 使开发人员可以轻松预览产品并 添加 到他们的网页
hopscotch.js官方网站
官方网站： http://linkedin.github.io/hopscotch/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。