jQuery鼠標(biāo)滑過橫向時間軸樣式(代碼詳解)
更新時間：2019年11月01日 14:10:30 作者：終身成長型
這篇文章主要介紹了jQuery鼠標(biāo)滑過橫向時間軸樣式，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
每日分享效果，今天分享內(nèi)容為：jQuery鼠標(biāo)滑過橫向時間軸樣式
效果圖：
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鼠標(biāo)滑過橫向時間軸樣式,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了jQuery超簡單選項卡實現(xiàn)方法,以一個完整實例形式較為詳細(xì)的分析了jQuery實現(xiàn)選項卡切換功能的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-09-09
第一次認(rèn)識jquery延遲對象，這篇文章主要為大家詳細(xì)解析JQ延遲對象的相關(guān)概念,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
jQuery html表格排序插件tablesorter使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery html表格排序插件tablesorter的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jquery post方式傳遞多個參數(shù)值后臺以數(shù)組的方式進(jìn)行接收
在用jquery的post方式傳遞多個值時，在后臺頁面可以用數(shù)組形式接收,很不錯吧，可以接收多個值啊，接下來介紹實現(xiàn)方法，感興趣的朋友可以了解下哦2013-01-01
這篇文章主要介紹了jQuery使用之設(shè)置元素樣式用法,實例分析了jQuery如何設(shè)置頁面的樣式風(fēng)格,包括添加、刪除、動態(tài)切換等的使用技巧,需要的朋友可以參考下2015-01-01
基于jQuery Bar Indicator 插件實現(xiàn)進(jìn)度條展示效果
這篇文章主要介紹了基于jQuery Bar Indicator 插件實現(xiàn)進(jìn)度條展示效果的相關(guān)資料,需要的朋友可以參考下2015-09-09
最近在ASP.NET中做了一個AJAX調(diào)用 : Client端先從ASP.NET Server后臺取到一個頁面模板，然后在頁面初始化時再從Server中取一些相關(guān)數(shù)據(jù)以實現(xiàn)頁面模板的動態(tài)顯示2012-05-05
本文詳細(xì)講解了JQuery中this的指向，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
通過jQuery源碼學(xué)習(xí)javascript(一)
最近在做日志統(tǒng)計程序，發(fā)現(xiàn)對方的程序是在Jquery基礎(chǔ)上進(jìn)行開發(fā)的，而公司的網(wǎng)站的框架是prototype。而且我也早就想了解一下Jquery源碼，故決定研究Jquery源碼，模擬它的方法2012-12-12
本文是腳本之家小編給大家分享的jquery validate驗證框架大全，本文內(nèi)容講的非常詳細(xì)，感興趣的朋友一起看看吧2015-09-09