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>
*{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;
}
jQuery鼠标滑过横向时间轴效果的更多相关文章
- jQuery 鼠标滑过及选中一行效果
/******* 表格效果 ********/ $("#gird_tbl tbody tr").live('mouseover', function () { $(this).ad ...
- Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果
Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...
- JS时间轴效果(类似于qq空间时间轴效果)
在上一家公司写了一个时间轴效果,今天整理了下,感觉有必要写一篇博客出来 给大家分享分享 当然代码还有很多不足的地方,希望大家多指点指点下,此效果类似于QQ空间或者人人网空间时间轴效果,当时也是为了需求 ...
- CSS3实现时间轴效果
原文:CSS3实现时间轴效果 最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬 ...
- JQuery鼠标移到小图显示大图效果的方法
JQuery鼠标移到小图显示大图效果的方法 本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠 ...
- js实现的时间轴效果
今天整理以前的资料发现以前写的一个时间轴效果,当时也是网上找了很久没有找到,就自己写了一个,现在发出来给有需要的人,代码写的可能有点乱. 效果图: 下面是美工做的设计图的效果(有个美工就是好): 下面 ...
- jquery鼠标滑过提示title具体实现代码
jquery鼠标滑过提示title的实现代码. 如下: <script type="text/javascript" src="http://ajax.google ...
- 使用ExpandableListView时间轴效果达到
不废话,首先在地图上,查看结果 这是用ExpandableListView来实现时间轴效果,原理比較简单,以月份为第一级,以天为第二级来实现的. package com.hj.main; import ...
- Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！
Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...
随机推荐
- cogs2223. [SDOI2016 Round1] 生成魔咒（后缀数组 hash 二分 set
题意:对一个空串每次在后面加一个字符,问每加完一次得到的字符串有几个不同的子串. 思路:每个子串都是某个后缀的前缀,对于每个后缀求出他能贡献出之前没有出现过的前缀的个数,答案累加就行. 要求每个后缀的 ...
- Codeforces Round #486 (Div. 3)988D. Points and Powers of Two
传送门:http://codeforces.com/contest/988/problem/D 题意: 在一堆数字中,找出尽量多的数字,使得这些数字的差都是2的指数次. 思路: 可以知道最多有三个,差 ...
- HDU 1018 Big Number 斯特林公式
Big Number 题意:算n!的位数. 题解:对于一个数来算位数我们一般都是用while去进行计算,但是n!这个数太大了,我们做不到先算出来在去用while算位数. while(a){ cnt++ ...
- POJ-1469 COURSES ( 匈牙利算法 dfs + bfs )
题目链接: http://poj.org/problem?id=1469 Description Consider a group of N students and P courses. Each ...
- 《即时消息技术剖析与实战》学习笔记4——IM系统如何保证消息的可靠性
IM 系统中,保证消息的可靠投递主要体现在两方面,一是消息的不丢失,二是消息的不重复. 一.消息不丢失 消息丢失的原因 首先看一下发送消息的流程,如下图所示: 消息.可以采取"时间戳比对&q ...
- Jmeter 之 逻辑控制器 if 控制器
最近工作不忙,利用空闲时间整理了下Jmeter的相关知识,下面给大家分享下Jmeter中 如果(if)控制的使用和应用. 如下图:线程组 > 添加 > 逻辑控制器 > 如果 (if) ...
- Optional和Stream的map与flatMap
Optional的map和flatMap Optional存在map和flatMap方法.map源码如下 public<U> Optional<U> map(Function& ...
- Vue中的slot（占坑，预留位置）
Vue中的slot(占坑,预留位置) 子模板不使用slot 子模板使用slot 子模板使用使用name属性,且传递data 文件名:Slots.vue //slot组件 <template> ...
- 明明有class为什么还是报ClassNotFoundException？
描述 我们修改接口时,习惯发布一个快照版本用于测试.我们的一个服务也是发布了快照版本,然后一个jar程序要依赖这个服务,修改pom文件打包部署后,通过 java -jar 命令执行这个jar程序,然后 ...
- ResourceDictionary主题资源替换（二） ：通过加载顺序来覆盖之前的主题资源
之前的ResourceDictionary主题资源替换(一)通过加载顺序来覆盖之前的主题资源,介绍了WPF框架对ResourceDictionary资源的合并规则. 此篇介绍一种在编译期间,实现资源替 ...