jQuery鼠标滑过横向时间轴效果---效果图:
jQuery鼠标滑过横向时间轴效果---全部代码:
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class='container'>

	<ul>
		<li>
			1993
			<div class='time'>
				<h1>1993</h1>
				<p>内容介绍</p>
			</div>
		</li>

		<li>
			1999
			<div class='time'>
				<h1>1999</h1>
				<p>内容介绍</p>
			</div>
		</li>

		<li>
			2006
			<div class='time'>
				<h1>2006</h1>
				<p>内容介绍</p>
			</div>
		</li>	

		<li>
			2019
			<div class='time'>
				<h1>2019</h1>
				<p>内容介绍</p>
			</div>
		</li>	

	</ul>

</div>

<script type="text/javascript" src='js/jquery1.10.2.js'></script>
<script type="text/javascript">
$(function(){
	$("ul li").hover(function(){
		$(this).find('.time').slideDown(500);
	},function(){
		$(this).find('.time').slideUp(500);
	})
})
</script>
</body>
</html>
jQuery鼠标滑过横向时间轴效果---css部分:
*{margin:0;padding:0;}
ul{
	list-style: none;
}
.container{
	height: 162px;
	background: url('../images/ico9.gif') repeat-x center;
}
.container li{
	float:left;
	background: url('../images/ico10.gif') no-repeat center top;
	width:140px;
	text-align: center;
	margin-top: 65px;
	position: relative;
	padding-top:30px;
	font-size:12px;
}
.time{
	position: absolute;
	width:100%;
	left:0;
	top:-20px;
	display: none;
}
.time h1{
	background: url('../images/ico11.gif') no-repeat center top;
	height: 67px;
	line-height: 67px;
	font-size:16px;
}
.time p{
	color:#999;
	font-size:14px;
}
每日分享效果附带视频:https://www.3mooc.com/front/couinfo/1000

jQuery鼠标滑过横向时间轴效果的更多相关文章

  1. jQuery 鼠标滑过及选中一行效果

    /******* 表格效果 ********/ $("#gird_tbl tbody tr").live('mouseover', function () { $(this).ad ...

  2. Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

    Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...

  3. JS时间轴效果(类似于qq空间时间轴效果)

    在上一家公司写了一个时间轴效果,今天整理了下,感觉有必要写一篇博客出来 给大家分享分享 当然代码还有很多不足的地方,希望大家多指点指点下,此效果类似于QQ空间或者人人网空间时间轴效果,当时也是为了需求 ...

  4. CSS3实现时间轴效果

    原文:CSS3实现时间轴效果 最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬 ...

  5. JQuery鼠标移到小图显示大图效果的方法

    JQuery鼠标移到小图显示大图效果的方法 本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠 ...

  6. js实现的时间轴效果

    今天整理以前的资料发现以前写的一个时间轴效果,当时也是网上找了很久没有找到,就自己写了一个,现在发出来给有需要的人,代码写的可能有点乱. 效果图: 下面是美工做的设计图的效果(有个美工就是好): 下面 ...

  7. jquery鼠标滑过提示title具体实现代码

    jquery鼠标滑过提示title的实现代码. 如下: <script type="text/javascript" src="http://ajax.google ...

  8. 使用ExpandableListView时间轴效果达到

    不废话,首先在地图上,查看结果 这是用ExpandableListView来实现时间轴效果,原理比較简单,以月份为第一级,以天为第二级来实现的. package com.hj.main; import ...

  9. Android实训案例(三)——实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果!

    Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...

随机推荐

  1. 微擎 人人商城 对接京东vop 对接京东商品,同步商品 地址,库存,价格,上下架等。(二) 设置后台管理界面

    昨天提到了,由于vop商品池未开通,故对接工作只能暂缓,现在要做一个专门针对vop商品的后台管理, 老规矩,先上设计链路图 因为后台本来就是有比较完善的商品管理系统, 所以我们只是针对vop 进行简单 ...

  2. 解决npm报错:Module build failed: TypeError: this.getResolve is not a function

    1.sass-loader的版本过高导致的编译错误,当前最高版本是8.x,需要退回到7.3.1 运行: npm uninstall sass-loader --save-dev(卸载当前版本) npm ...

  3. ObjectMapper2

    ObjectMapper mapper = new ObjectMapper();                try {                    user = mapper.read ...

  4. BadBoy+JMeter来录制和运行Web测试脚本

    参考: http://jingyan.baidu.com/article/5d368d1ef548d43f61c05761.html http://www.51testing.com/html/00/ ...

  5. CF 1206D - Shortest Cycle Floyd求最小环

    Shortest Cycle 题意 有n(n <= 100000)个数字,两个数字间取&运算结果大于0的话连一条边.问图中的最小环. 思路 可以发现当非0数的个数很大,比如大于200时, ...

  6. HDU - 4009 - Transfer water 朱刘算法 +建立虚拟节点

    HDU - 4009:http://acm.hdu.edu.cn/showproblem.php?pid=4009 题意: 有n户人家住在山上,现在每户人家(x,y,z)都要解决供水的问题,他可以自己 ...

  7. UVA - 10462-Is There A Second Way Left? Kruskal求次小生成树

    UVA - 10462 题意: 求次小生成树的模板题,这道题因为有重边的存在,所以用kruskal求比较好. #include <iostream> #include <cstdio ...

  8. div标签嵌套原则详解(转载)

    这个也许平时人们不注意,但是非常有用,尤其是当你实在找不到原因为什么网页显示错误的时候. XHTML 的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span ...

  9. 使用HTML制作网页

    网页基本信息[编码格式] gb2312:简体中文,一般用于包含中文和英文的页面 ISO-885901:纯英文,一般用于只包含英文的页面 big5:繁体中文,一般用户带有繁体字的页面 utf-8:国际通 ...

  10. C#中FileStream的对比以及使用方法

    场景 File与FileStream的区别 举例: 将读取文件比作是从A桶往B桶运水. 使用File就是整个用桶倒进去,使用FileStream就是使用水管慢慢输送. FileStream与Strea ...