插件描述

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

跳房子接受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

作者：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. 关于JavaScript中计算精度丢失的问题

    摘要: 由于计算机是用二进制来存储和处理数字,不能精确表示浮点数,而JavaScript中没有相应的封装类来处理浮点数运算,直接计算会导致运算精度丢失. 为了避免产生精度差异,把需要计算的数字升级(乘 ...

  2. WCF中的数据契约（DataContract）

    服务契约定义了远程访问对象和可供调用的方法,数据契约则是服务端和客户端之间要传送的自定义数据类型. 一旦声明一个类型为DataContract,那么该类型就可以被序列化在服务端和客户端之间传送,如下所 ...

  3. unicode编码和中国的相互转换

    如果你的原始文件1.properties(该文件的编码中国).要转换unicode的 在cmd通过进入你在哪里在这种类型的文件夹: native2ascii -encoding gb2312 1.pr ...

  4. 启用IIS7报错功能

    进入:控制面板 - 卸载程序 - 打开或关闭Windows功能 如果访问任何不存在页面或页面出错时空白: Internet 信息服务 - 万维网服务 - 常见 HTTP 功能 - HTTP 错误 打勾 ...

  5. ArcEngine载入中SDE问题栅格数据

    当直接加载矢量数据到IFeatureWorkspace接口可,但是,在装载门格当要传送的数据IRasterWorkspaceEx接口. 效果如下面的,对可以被添加到双击Globe在. watermar ...

  6. Socket 学习（三）.1 tcp 通讯

    实现了,局域网客户端 对客户端 的通讯. 实际上这是 一个 客户端 兼 服务端 . 2个阿里云服务器测试 效果图: 本地效果图: using System; using System.Collecti ...

  7. Facebook Hack 语言 简介

    1. Hack 是什么? Hack 是一种基于HHVM(HipHop VM 是Facebook推出的用来执行PHP代码的虚拟机,它是一个PHP的JIT编译器,同时具有产生快速代码和即时编译的优点.)的 ...

  8. jQuery基础---Ajax进阶

    原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一 ...

  9. NET中异常处理的最佳实践

    NET中异常处理的最佳实践 本文翻译自CodeProject上的一篇文章,原文地址. 目录 介绍 做最坏的打算 提前检查 不要信任外部数据 可信任的设备:摄像头.鼠标以及键盘 “写操作”同样可能失效 ...

  10. 一个完整的Installshield安装程序实例—艾泽拉斯之海洋女神出品（四） --高级设置二

    原文:一个完整的Installshield安装程序实例-艾泽拉斯之海洋女神出品(四) --高级设置二 上一篇:一个完整的安装程序实例—艾泽拉斯之海洋女神出品(三) --高级设置一4. 根据用户选择的组 ...