jQuery跳房子插件hopscotch
插件描写叙述
跳房子是一个框架,使开发者能够轻松预览产品并加入到他们的网页
跳房子接受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>
效果如图:
项目演示源代码下载：http://download.csdn.net/detail/itmyhome/7718733
