jQuery鼠标滑过横向时间轴样式(代码详解)


Posted in jQuery onNovember 01, 2019

每日分享效果,今天分享内容为:jQuery鼠标滑过横向时间轴样式

效果图:

jQuery鼠标滑过横向时间轴样式(代码详解) 

HTML代码:

`<!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>`

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/c...

总结

以上所述是小编给大家介绍的jQuery鼠标滑过横向时间轴样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 #jQuery
Javascript和jquery在selenium的使用过程
Oct 31 #jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 #jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 #jQuery
jquery实现购物车基本功能
Oct 25 #jQuery
使用jQuery实现掷骰子游戏
Oct 24 #jQuery
You might like
?算你??的 PHP 程式大小
2006/12/06 PHP
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
教大家使用Python SqlAlchemy
2016/02/12 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
python 19个值得学习的编程技巧
2020/08/15 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
营销与策划个人求职信
2013/09/22 职场文书
模具专业推荐信
2013/10/30 职场文书
校园活动策划书范文
2014/01/10 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
vue3中provide && inject的使用
2021/07/01 Vue.js