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
作者：itmyhome
jQuery跳房子插件hopscotch的更多相关文章
- 转:jQuery常用插件
原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome 上传时间:2014-06-1 ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
- bootstrap-简洁实用的jQuery手风琴插件
前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...
- 推荐15款响应式的 jQuery Lightbox 插件
利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
- 让网站动起来！12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
随机推荐
- ajax提交与上传文件同步
我们经常担心文件上传,最烦比,可以推断,我们上传的文件大小,格风格等等一系列的推理验证.所以,我们只能ajax提交验证.ajax异步提交太麻烦,我想太多的变化代码,事实上,我们使用JQuery当插件, ...
- 部署中遇到的问题-UWSGI(一)
假设uwsgi错误中提示 *** no app loaded. going in full dynamic mode *** 运行 [plain] view plaincopy aptitude in ...
- REUSEADDR 选项
一般而言,对于处理2MSL状态的套接字(一般为服务端套接字)是不允许接受从同一客户端重新发起一个新的连接的,但是套接字编程系统接口允许应用程序通过设置一个REUSEADDR选项,使处于2MSL状态的套 ...
- 採用Hexo 搭建Team Blog
採用Hexo 搭建Team Blog 首先你要会使用Git 已经GitHub,然后让我们了解下什么是静态Blog 静态博客是指 不须要数据库驱动,拥有丰富模板,通过模板标记语言生成简单html css ...
- MongoDb的副本集搭建教程（个人操作笔记）
很多公司都在用MongoDb ,一直没有时间研究,最近好好的整了一下,做下笔记,直接上操作步骤,关于Mongodb的理论知识可以搜索其他资料,也可以联系我索取 mongoDB官方已经不建议使用主从模式 ...
- linux简单的数据包捕获分析
有时我们会遇到一些问题,需要捕捉数据包分析,当手头有没有专业的抓图工具,您可以使用tcpdump相反,看看(一般版本附带这个工具) 比如,我们要分析eth0与接口192.168.7.188 这个对象I ...
- PHP版本的区别
原文:PHP版本的区别 以为这个已经写过了,发现没有,赶紧补充下. PHP的版本,自从进入5以后,发布新版本速度明显提升很多,从PHP5.2开始,5.3 .5.4 .5.5,就快要6.0了. 注:ec ...
- 2014值得期待的Erlang两本新书
在2014年的开头就有这样一个令人振奋的好消息,Erlang有一本新书即将出版 <The Erlang Runtime System>,其作者happi在2013年3月份发布了这本书的写作 ...
- c语言发挥帕斯卡三角
我们已经确定了帕斯卡三角的规则,下面是我的代码,非常实用哦! !! #include<stdio.h> void main() { int i,j,n,k; sca ...
- 安卓WindowManager注入事件如何跳出进程间安全限制
在分析monkey源码的时候有些背景知识没有搞清楚,比如在看到monkey是使用windowmanager的injectKeyEvent方法注入事件的时候,心里就打了个疙瘩,这种方式不是只能在当前应用 ...