|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
具有日期和具體鐘點(diǎn)時(shí)間的時(shí)間線【演示/源碼下載】
作者:admin 時(shí)間:2022-3-5 8:43:0 瀏覽:大部分時(shí)間線都只有日期，今天介紹一款具有日期和具體鐘點(diǎn)時(shí)間的時(shí)間線/時(shí)間軸。
當(dāng)點(diǎn)擊日期時(shí)，還可以折疊該日時(shí)間線，如下圖，2月19日的時(shí)間線被折疊起來。
該實(shí)例使用了CSS+jQuery來實(shí)現(xiàn)，但是如果無需折疊效果，則代碼變得更加簡單，純CSS就可以了，因?yàn)闊o需用到j(luò)Query編程。
HTML
<div class="history" style="margin-top:50px;">
<div class="history-date">
<ul>
<h2 class="first"> <a href="#nogo">2月19日</a> <b>本周工作安排</b></h2>
<li class="green">
<h3>10:00<span>2月19日</span></h3>
<dl> <dt>任務(wù)1.1</span></dt> </dl>
</li>
<li>
<h3>13:00<span>2月19日</span></h3>
<dl> <dt>任務(wù)1.2</span></dt> </dl>
</li>
<li>
<h3>18:00<span>2月19日</span></h3>
<dl> <dt>任務(wù)1.3</span></dt> </dl>
</li>
<li class="green">
<h3>22:00<span>2月19日</span></h3>
<dl> <dt>任務(wù)1.4</span></dt> </dl>
</li>
</ul>
</div>
<div class="history-date">
<ul>
<h2 class="date02"> <a href="#nogo">2月20日</a> <b>任務(wù)二</b></h2>
<li class="green">
<h3>10:00~11:30<span>2月20日</span></h3>
<dl> <dt>任務(wù)2.1</span></dt> </dl>
</li>
<li>
<h3>12:00~13:30<span>2月20日</span></h3>
<dl> <dt>任務(wù)2.2</span></dt> </dl>
</li>
<li>
<h3>15:00~16:30<span>2月20日</span></h3>
<dl> <dt>任務(wù)2.3</dt> </dl>
</li>
<li class="green">
<h3>18:30~20:30<span>2月20日</span></h3>
<dl> <dt>任務(wù)2.4</span></dt> </dl>
</li>
</ul>
</div>
</div>
時(shí)間線盒子為一個(gè)DIV，其class值是history。
每日時(shí)間線區(qū)域?yàn)橐粋€(gè)DIV，其class值是history-date。
我們注意到，第一個(gè)h2標(biāo)簽的class值是first，而后面的h2標(biāo)簽的class值是date02，是因?yàn)闀r(shí)間線上第一個(gè)日期顯示的圖標(biāo)和文字樣式跟后面日期顯示的有所不同，看下圖。
列表標(biāo)簽li默認(rèn)無class屬性，當(dāng)它的class值是green時(shí)，該時(shí)間點(diǎn)的時(shí)間顏色就變成綠色，該時(shí)間點(diǎn)的文字就變得較大。
jQuery
本實(shí)例用到j(luò)Query編程，但當(dāng)你無需任何效果（如折疊時(shí)間線）時(shí)，則無需用到j(luò)Query編程，僅需用CSS來實(shí)現(xiàn)。
本實(shí)例jQuery編程寫在一個(gè)js文件里，所以你需要引用兩個(gè)文件。若無需用到j(luò)Query編程，則可刪除如下兩行代碼。
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
script.js
$(function()
{
systole();
});
function systole()
{
if (!$(".history").length)
{
return;
}
var $warpEle = $(".history-date"),
$targetA = $warpEle.find("h2 a,ul li dl dt a"),
parentH,
eleTop = [];
setTimeout(function()
{
$warpEle.find("ul").children(":not('h2:first')").each(function(idx)
{
eleTop.push($(this).position().top);
$(this).css(
{
"margin-top": -eleTop[idx]
}).children().hide();
}).animate(
{
"margin-top": 0
}, 1600).children().fadeIn();
$warpEle.parent().animate(
{
"height": parentH
}, 3000);
$warpEle.find("ul").children(":not('h2:first')").addClass("bounceInDown").css(
{
"-webkit-animation-duration": "2s",
"-webkit-animation-delay": "0",
"-webkit-animation-timing-function": "ease",
"-webkit-animation-fill-mode": "both"
}).end().children("h2").css(
{
"position": "relative"
});
}, 600);
$targetA.click(function()
{
$(this).parent().css(
{
"position": "relative"
});
$(this).parent().siblings().slideToggle();
$warpEle.parent().removeAttr("style");
return false;
});
};
CSS
.history {
background: url(line04.gif) repeat-y 187px 0;
overflow: hidden;
position: relative;
}
.history-date {
overflow: hidden;
position: relative;
}
.history-date h2 {
background: #ececec url(icon06.gif) no-repeat 158px 0;
height: 59px;
font-size: 25px;
font-family: 微軟雅黑;
font-weight: normal;
padding-left: 45px;
margin-bottom: 74px;
}
.history-date h2.first {
position: absolute;
left: 0;
top: 0;
width: 500px;
z-index: 99;
}
.history-date h2 a {
color: #00bbff;
display: inline-block;
*display: inline;
zoom: 1;
background: url(icon08.gif) no-repeat right 50%;
padding-right: 17px;
margin: 21px 97px 0 0;
}
.history-date h2 a:hover {
text-decoration: none;
}
.history-date h2 img {
vertical-align: -5px;
}
.history-date h2.date02 {
background: none;
}
.history-date ul li {
background: url(icon07.gif) no-repeat 180px 0;
padding-bottom: 50px;
zoom: 1;
}
.history-date ul li.last {
padding-bottom: 0;
}
.history-date ul li:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.history-date ul li h3 {
float: left;
width: 168px;
text-align: right;
padding-right: 19px;
color: #c3c3c3;
font: normal 18px/16px Arial;
}
.history-date ul li h3 span {
display: block;
color: #d0d0d0;
font-size: 12px;
}時(shí)間線上用到幾個(gè)圖片，均在CSS里設(shè)置。
.history 定義時(shí)間線盒子DIV的樣式。
.history-date 定義時(shí)間線日期區(qū)域DIV的樣式。
.history-date h2 定義時(shí)間線日期標(biāo)簽的樣式。
.history-date h2.first 是定義時(shí)間線第一個(gè)日期標(biāo)簽的樣式。
.history-date h2.date02 是定義時(shí)間線除第一個(gè)日期外的其余日期標(biāo)簽樣式。
.history-date ul li 定義時(shí)間線列表標(biāo)簽樣式。
.history-date ul li h3 定義時(shí)間線上時(shí)間的樣式。
總結(jié)
本文介紹了一款具有日期和具體鐘點(diǎn)時(shí)間的時(shí)間線/時(shí)間軸，可滿足需要具體到鐘點(diǎn)時(shí)間的如日常工作/計(jì)劃任務(wù)等需求。
本實(shí)例代碼，你可以只保留CSS部分來完成一個(gè)靜態(tài)的時(shí)間線設(shè)計(jì)，也可以多保留JS部分來做一些個(gè)性化的交互效果。
您可能對以下文章也感興趣
- 站長推薦
