jQuery跳房子插件hopscotch

浏览数：23 / 时间：2015年06月09日

插件描述

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

跳房子接受JSON对象作为输入,并提供开发人员来控制渲染巡演显示和管理的游览进度的API。

使用步骤

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

一、引入文件

<link href="css/hopscotch-0.1.2.css" rel="stylesheet" type="text/css" >
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/hopscotch-0.1.2.js" type="text/javascript"></script>

二、正文

<body>
	<h1>
		 平凡之路
	</h1>
	<h3 id="header">
		作词：朴树、韩寒 作曲：朴树
	</h3>
	<div id="content1">
		<p>
			徘徊着的 在路上的</br>
			你要走吗</br>
			易碎的 骄傲着</br>
			那也曾是我的模样</br>
		</p>
	</div>
	<div id="content2">
		<p>
			沸腾着的 不安着的</br>
			你要去哪</br>
			谜一样的 沉默着的</br>
			故事你真的在听吗</br>
		</p>
	</div>
	<div id="content3">
		<p>
			我曾经跨过山和大海 也穿过人山人海</br>
			我曾经拥有着一切 转眼都飘散如烟</br>
			我曾经失落失望失掉所有方向</br>
			直到看见平凡才是唯一的答案</br>
		</p>
	</div>
	<div id="content4">
		<p>
			当你仍然 还在幻想</br>
			你的明天</br>
			她会好吗 还是更烂</br>
			对我而言是另一天</br>
		</p>
	</div>
	<div id="content5">
		<p>
			我曾经毁了我的一切 只想永远地离开</br>
			我曾经堕入无边黑暗 想挣扎无法自拔</br>
			我曾经象你象他象那野草野花</br>
			绝望着 渴望着 哭着笑着平凡着</br>
		</p>
	</div>
	<div id="content6">
		<p>
			向前走 就这么走 就算你被给过什么</br>
			向前走 就这么走 就算你被夺走什么</br>
			向前走 就这么走 就算你会错过什么</br>
			向前走 就这么走 就算你会</br>
		</p>
	</div>
	<div id="content7">
		<p>
			我曾经跨过山和大海 也穿过人山人海</br>
			我曾经拥有着一切 转眼都飘散如烟</br>
			我曾经失落失望失掉所有方向</br>
			直到看见平凡才是唯一的答案</br>
		</p>
	</div>
	<div id="content8">
		<p>
			我曾经毁了我的一切 只想永远地离开</br>
			我曾经堕入无边黑暗 想挣扎无法自拔</br>
			我曾经象你象他象那野草野花</br>
			绝望着 渴望着 哭着笑着平凡着</br>
		</p>
	</div>
	<div id="content9">
		<p>
			我曾经跨过山和大海 也穿过人山人海</br>
			我曾经问遍整个世界 从来没得到答案</br>
			我不过象你象他象那野草野花</br>
			冥冥中这是我 唯一要走的路啊</br>
		</p>
	</div>
	<div id="content10">
		<p>
			时间无言 如此这般</br>
			明天已在眼前</br>
			风吹过的 路依然远</br>
			你的故事讲到了哪</br>
		</p>
	</div>
</body>

三、js里定义并启动浏览

<script type="text/javascript">
	$(function() {
		var tour = {
			id : "hello-hopscotch",
			steps : [ {
				title : "介绍",
				content : "《平凡之路》是电影《后会无期》的主题曲,由朴树作曲演唱,朴树、韩寒作词",
				target : "header",
				placement : "bottom"
			}, {
				title : "",
				content : "在《平凡之路》这首歌里，不仅仅将经历浓缩成了故事,更是将经历融化成了一句句歌词和音符。",
				target : document.querySelector("#content2"),
				placement : "bottom"
			} , {
				title : "",
				content : "每个人都能都能从中看到自己，并在听到这首歌的时候，情不自禁在脑海里回放过往。",
				target : document.querySelector("#content3"),
				placement : "bottom"
			}, {
				title : "",
				content : "《平凡之路》唱出的不仅仅是朴树、韩寒，甚至是你的、我的、所有人的“经历”，令人不禁唏嘘过往，感叹曾经。",
				target : document.querySelector("#content5"),
				placement : "bottom"
			}]
		};
		// Start the tour!
		hopscotch.startTour(tour);
	})
</script>

效果如图: