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道路上的小菜鸟,这篇讲 ...
随机推荐
- 【qt】【QString的诸多操作】
前言: qt的数据处理莫过于QString,QString对于字符串的操作多的数不胜数.下面博主就将常用的罗列出来,一起分享. 正文: 下面的操作具体为:追加,查找,删除,提取,分割,各种转换等等. ...
- DEVOPS基础
转自:http://www.scrumcn.com/agile/scrum-knowledge-library/agile-development.html#tab-id-7 DevOps是一组过程. ...
- [python]专用下划线标识符
1. python用下划线作为变量前缀和后缀,来指定特殊变量. _xxx: 不用'from module import *'导入,一般被看作是私有的,在模块或类外不可用使用. __xxx__: 系统定 ...
- HDU4614Vases and Flowers 二分+线段树；
参考:https://blog.csdn.net/ophunter_lcm/article/details/9879495 题意: 有n个花瓶,有两种操作,1.从a开始放b朵花,有花的花瓶跳过,2 ...
- LuoGu-P1122 最大子树和+树形dp入门
传送门 题意:在一个树上,每个加点都有一个值,求最大的子树和. 思路:据说是树形dp入门. 用dfs,跑一边,回溯的时候求和,若和为负数,则减掉,下次不记录这个节点. #include <ios ...
- codeforces 284 C. Cows and Sequence（线段树）
题目链接:http://codeforces.com/contest/284/problem/C 题意:就是给出3个操作 1)是将前i 个数加x 2)在数组最后添加一个数x 3)删除数组最后的那个数 ...
- unicode编码原理及问题
历史在1963年,计算机的使用尚不广泛,那时使用的是7-bit的ASCII码,范围为0-127作为字符的编码,只支持少部分的字符,但是随着计算机的普及,不同的国家地区开始自己制造自己的编码规范,这导致 ...
- Python学习之旅：使用virtualenv创建Python环境及PyQT5环境配置
一.写在前面 从学 Python 的第一天起,我就知道了使用 pip 命令来安装包,从学习爬虫到学习 Web 开发,安装的库越来越多,从 requests 到 lxml,从 Django 到 Flas ...
- 【Offer】[40] 【最小的K个数】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入n个整数,找出其中最小的k个数.例如,输入4.5.1.6.2.7.3.8这8个数字,则最小的4个数字是1.2.3.4. 牛客网刷题地 ...
- 剑指Offer（三十二）：把数组排成最小的数
剑指Offer(三十二):把数组排成最小的数 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.net/b ...