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...
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17