jQuery鼠標滑過橫向時間軸樣式(代碼詳解)
更新時間：2019年11月01日 14:10:30 作者：終身成長型
這篇文章主要介紹了jQuery鼠標滑過橫向時間軸樣式，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
每日分享效果，今天分享內(nèi)容為：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>內(nèi)容介紹</p>
</div>
</li>
<li>
1999
<div class='time'>
<h1>1999</h1>
<p>內(nèi)容介紹</p>
</div>
</li>
<li>
2006
<div class='time'>
<h1>2006</h1>
<p>內(nèi)容介紹</p>
</div>
</li>
<li>
2019
<div class='time'>
<h1>2019</h1>
<p>內(nèi)容介紹</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...
總結(jié)
以上所述是小編給大家介紹的jQuery鼠標滑過橫向時間軸樣式,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要為大家詳細介紹了jquery標簽選擇器應(yīng)用示例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
jquery結(jié)合css實現(xiàn)返回頂部功能
在本篇文章里小編給大家整理了一篇關(guān)于jquery結(jié)合css實現(xiàn)返回頂部功能的相關(guān)文章，有興趣的朋友們可以實例測試下。2021-08-08
Jquery原生態(tài)實現(xiàn)表格header頭隨滾動條滾動而滾動
表頭是浮動的，因為內(nèi)容在同一頁面展示，當滾動時，看不到列頭，為了改動少只能使用jquery原生態(tài)實現(xiàn)滾動2014-03-03
本節(jié)主要介紹了jQuery如何獲取節(jié)點和子節(jié)點文本，下面有個示例，大家可以參考下2014-07-07
php結(jié)合imgareaselect實現(xiàn)圖片裁剪
這篇文章主要介紹了php結(jié)合imgareaselect實現(xiàn)圖片裁剪的相關(guān)資料,需要的朋友可以參考下2015-07-07
淺談jQuery綁定事件會疊加的解決方法和心得總結(jié)
下面小編就為大家?guī)硪黄獪\談jQuery綁定事件會疊加的解決方法和心得總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
jQuery插件FusionCharts實現(xiàn)的2D餅狀圖效果【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的2D餅狀圖效果,結(jié)合完整實例形式分析了FusionCharts插件2D餅狀圖繪制相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery的選擇包含兩種，一種是選擇器，一種是篩選器。篩選器是對選擇器選定的jQuery對象做進一步選擇;記下來將詳細介紹下篩選器children()感興趣的你可不要錯過了哈，或許本文的知識點對你有所幫助2013-02-02
今天給大家分享一款頁面無縫滾動的jquery插件，支持上下左右，淡入淡出，滾動時間設(shè)置，動畫時間設(shè)置，感興趣的小伙伴們可以參考一下2015-11-11
本文給大家分享的是一段基于Jquery實現(xiàn)表單驗證的代碼，非常簡單實用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08