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