插件描述

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

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

使用步骤

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

一、引入文件

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

二、正文 

  1. <body>
  2. 	<h1>
  3. 		 平凡之路
  4. 	</h1>
  5. 	<h3 id="header">
  6. 		作词：朴树、韩寒 作曲：朴树
  7. 	</h3>
  8. 	<div id="content1">
  9. 		<p>
  10. 			徘徊着的 在路上的</br>
  11. 			你要走吗</br>
  12. 			易碎的 骄傲着</br>
  13. 			那也曾是我的模样</br>
  14. 		</p>
  15. 	</div>
  16. 	<div id="content2">
  17. 		<p>
  18. 			沸腾着的 不安着的</br>
  19. 			你要去哪</br>
  20. 			谜一样的 沉默着的</br>
  21. 			故事你真的在听吗</br>
  22. 		</p>
  23. 	</div>
  24. 	<div id="content3">
  25. 		<p>
  26. 			我曾经跨过山和大海 也穿过人山人海</br>
  27. 			我曾经拥有着一切 转眼都飘散如烟</br>
  28. 			我曾经失落失望失掉所有方向</br>
  29. 			直到看见平凡才是唯一的答案</br>
  30. 		</p>
  31. 	</div>
  32. 	<div id="content4">
  33. 		<p>
  34. 			当你仍然 还在幻想</br>
  35. 			你的明天</br>
  36. 			她会好吗 还是更烂</br>
  37. 			对我而言是另一天</br>
  38. 		</p>
  39. 	</div>
  40. 	<div id="content5">
  41. 		<p>
  42. 			我曾经毁了我的一切 只想永远地离开</br>
  43. 			我曾经堕入无边黑暗 想挣扎无法自拔</br>
  44. 			我曾经象你象他象那野草野花</br>
  45. 			绝望着 渴望着 哭着笑着平凡着</br>
  46. 		</p>
  47. 	</div>
  48. 	<div id="content6">
  49. 		<p>
  50. 			向前走 就这么走 就算你被给过什么</br>
  51. 			向前走 就这么走 就算你被夺走什么</br>
  52. 			向前走 就这么走 就算你会错过什么</br>
  53. 			向前走 就这么走 就算你会</br>
  54. 		</p>
  55. 	</div>
  56. 	<div id="content7">
  57. 		<p>
  58. 			我曾经跨过山和大海 也穿过人山人海</br>
  59. 			我曾经拥有着一切 转眼都飘散如烟</br>
  60. 			我曾经失落失望失掉所有方向</br>
  61. 			直到看见平凡才是唯一的答案</br>
  62. 		</p>
  63. 	</div>
  64. 	<div id="content8">
  65. 		<p>
  66. 			我曾经毁了我的一切 只想永远地离开</br>
  67. 			我曾经堕入无边黑暗 想挣扎无法自拔</br>
  68. 			我曾经象你象他象那野草野花</br>
  69. 			绝望着 渴望着 哭着笑着平凡着</br>
  70. 		</p>
  71. 	</div>
  72. 	<div id="content9">
  73. 		<p>
  74. 			我曾经跨过山和大海 也穿过人山人海</br>
  75. 			我曾经问遍整个世界 从来没得到答案</br>
  76. 			我不过象你象他象那野草野花</br>
  77. 			冥冥中这是我 唯一要走的路啊</br>
  78. 		</p>
  79. 	</div>
  80. 	<div id="content10">
  81. 		<p>
  82. 			时间无言 如此这般</br>
  83. 			明天已在眼前</br>
  84. 			风吹过的 路依然远</br>
  85. 			你的故事讲到了哪</br>
  86. 		</p>
  87. 	</div>
  88. </body>

三、js里定义并启动浏览 

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

效果如图:

项目演示源码下载：http://download.csdn.net/detail/itmyhome/7718733

作者：itmyhome

jQuery跳房子插件hopscotch的更多相关文章

  1. 转:jQuery常用插件

    原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome      上传时间:2014-06-1 ...

  2. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  3. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  4. 使用jQuery.form插件，实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  5. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  6. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  7. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  8. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

  9. 让网站动起来！12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

随机推荐

  1. Swift 语言概览 -自己在Xcode6 动手写1

    原文:Swift 语言概览 -自己在Xcode6 动手写1 Swift是什么? Swift是苹果于WWDC 2014发布的编程语言,这里引用The Swift Programming Language ...

  2. （工具）source insight高速增加时间代码

    这篇文章是程序代码更改由其他用户. 不是原厂原装,例如下列总结,使用作为个人笔记. (1)打开projectbase.打开文件Utils.em,插入下面代码: //插入时间 macro MonthTo ...

  3. 我的MYSQL学习心得（十）

    原文:我的MYSQL学习心得(十) 我的MYSQL学习心得(十) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL ...

  4. Python学习笔记：概要

    1.print不同的互动解释语句输出和输出 在以下示例,我们分配字符串值到可变myString.先用print 要显示一个变量的内容, 其次是变量名,以显示. >>> myStrin ...

  5. sax（用于处理XML事件驱动的推模型）解析例子

    SAX解析 Java程序如下: import org.xml.sax.helpers.DefaultHandler; import javax.xml.parsers.SAXParser; impor ...

  6. sql点滴37—mysql中的错误Data too long for column '' at row 1

    原文:sql点滴37-mysql中的错误Data too long for column '' at row 1   1.MYSQL服务 我的电脑——(右键)管理——服务与应用程序——服务——MYSQ ...

  7. NET Socket服务编程

    smark https://github.com/IKende/ .NET Socket服务编程之-高效连接接入编 在.NET上编写网络服务深入都有2,3年了,而这些时间时如何在.NET里实现网络服务 ...

  8. 手机发送短信JS验证

    function tj() { var phone = jQuery('#phone').val(); var code = jQuery('#verificationcode').val(); va ...

  9. ASP.NET-FineUI开发

    ASP.NET-FineUI开发 随笔分类 - FineUI   ASP.NET-FineUI开发实践-10 摘要: 嵌套Grid,光棍月大放送,不藏着掖着.实在写的不好,没脸藏啊~只考虑显示排序修改 ...

  10. SQLite数据库查看工具(免费)

    1. SQLite Administrator http://sqliteadmin.orbmu2k.de/ iteSpy 2.  SQLiteSpy   http://www.yunqa.de/de ...