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. .NET Core 使用 K8S ConfigMap的正确姿势

    背景 ASP.NET Core默认的配置文件定义在appsetings.json和appsettings.{Environment}.json文件中. 这里面有一个问题就是,在使用容器部署时,每次修改 ...

  2. c# autofac结合WebApi的使用

    一.下载相关类库引用 install-package Autofac install-package Autofac.Mvc4 install-package Autofac.WebApi2 二.配置 ...

  3. VS2017 之 MYSQL实体数据模

    Photon Server 和 Unity3D 数据交互: Photon Server 服务端编程 Unity3D 客户端编程 VS2017 之 MYSQL实体数据模 一.新建数据库连接后,点击下一步 ...

  4. c博客作业00--我的第一篇博客

    1.你对网络专业或计算机专业了解是怎样? 一开始以为计算机网络专业就是搞跟计算机有关的东西,后来查了网络才知道,网络专业主要学计算机科学基础理论软硬件系统及应用知识 .网络工程的专业及应用知识. 2. ...

  5. 在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解

    在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进 ...

  6. Flask源码浅析

    前言 学习一样东西,要先知其然,然后知其所以然. 这次,我们看看Flask Web框架的源码.我会以Flask 0.1的源码为例,把重点放在Flask如何处理请求上,看一看从一个请求到来到返回响应都经 ...

  7. java中父类子类静态代码块、构造代码块执行顺序

    父类静态(代码块,变量赋值二者按顺序执行) 子类静态 父类构造代码块 父类构造方法 子类构造代码块 子类构造方法 普通方法在实列调用的时候执行,肯定位于上面之后了 //父类A public class ...

  8. Python二元操作符

    def quiz_message(grade): outcome = 'failed' if grade<50 else 'passid' print ('grade', grade, 'out ...

  9. Git使用教程 Windows使用Git全攻略

    在Windows上安装Git 我们需要先把Git的安装包下载下来,访问网址:https://git-for-windows.github.io/ 或者百度网盘:链接: https://pan.baid ...

  10. SSM框架——详细整合教程

    SSM框架——详细整合教程(Spring+SpringMVC+MyBatis) 1.基本概念   1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Jav ...