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+pjax简单示例汇总
Apr 21 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery实现回到顶部效果
Oct 19 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
Angular使用Md5加密的解决方法
2017/09/16 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
法定代表人授权委托书
2014/04/04 职场文书
大学活动总结范文
2014/04/29 职场文书
会计学自荐信
2014/06/03 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
2014年导购员工作总结
2014/11/18 职场文书
汉语拼音教学反思
2016/02/22 职场文书
python爬虫--selenium模块
2021/03/31 Python
Python 数据可视化之Seaborn详解
2021/11/02 Python
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android