插件描写叙述
跳房子是一个框架,使开发者能够轻松预览产品并加入到他们的网页
跳房子接受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
