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. 迁移桌面程序到MS Store（10）——在Windows S Mode运行

    首先简单介绍Windows 10 S Mode,Windows在该模式下,只能跑MS Store里的软件,不能通过其他方式安装.好处是安全有保障,杜绝一切国产流氓软件.就像iOS一样,APP进商店都需 ...

  2. HTML5学习手册

    目录 HTML 简介 HTML 简介 什么是 HTML? HTML 标签 HTML 文档 = 网页 基本的 HTML 标签 - 四个实例 HTML 标题 HTML 段落 HTML 链接 HTML 图像 ...

  3. Bootstrap如何禁止响应式布局

    Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...

  4. FastDFS初印象

    是什么?         FastDFS是一个轻量级分布式文件系统. 能干嘛?         对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等. 相关概念        ...

  5. HTTP协议请求响应模型

    HTTP协议请求响应模型:以”用户登录“这个场景来描述 第一步:客户端发起请求到API接口层,操作:用户在客户端填写用户名和密码,点击登录,发送请求. 第二步:api接收到客户端发起的用户请求,api ...

  6. MIT HAKMEM算法-BitCount算法

    MIT HAKMEM算法 1.问题来源 牛客刷题 问题描述: #include <iostream> using namespace std; unsigned int fib(int n ...

  7. 【EDU68 E】 Count The Rectangles 数据结构算几何

    CF # 题意 总共有5000条线段,这些线段要么水平,要么垂直,问这些线段组成了多少矩形. # 思路 这是一个n*n*(log)的思路 自己一开始想着枚举两条垂直边,想着怎么把水平的边插入,再进行冗 ...

  8. BZOJ-2743: [HEOI2012]采花 前缀和 树状数组

    BZOJ-2743 LUOGU:https://www.luogu.org/problemnew/show/P4113 题意: 给一个n长度的序列,m次询问区间,问区间中出现两次及以上的数字的个数.n ...

  9. codeforces 919C Seat Arrangements 思维模拟

    C. Seat Arrangements time limit per test 1 second memory limit per test 256 megabytes input standard ...

  10. JS数据结构第六篇 --- 二叉树力扣练习题

    1.第226题:翻转二叉树 递归+迭代两种实现方式: /** 反转二叉树 * Definition for a binary tree node. * function TreeNode(val) { ...