技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

具有日期和具体钟点时间的时间线【演示/源码下载】

作者:admin    时间:2022-3-5 8:43:0    浏览:

大部分时间线都只有日期,今天介绍一款具有日期和具体钟点时间的时间线/时间轴。

 具有日期和具体钟点时间的时间线/时间轴

当点击日期时,还可以折叠该日时间线,如下图,2月19日的时间线被折叠起来。

可以折叠的时间线/时间轴

demodownload

该实例使用了CSS+jQuery来实现,但是如果无需折叠效果,则代码变得更加简单,纯CSS就可以了,因为无需用到jQuery编程。

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>任务1.1</span></dt> </dl>
            </li>
            <li>
                <h3>13:00<span>2月19日</span></h3>
                <dl> <dt>任务1.2</span></dt> </dl>
            </li>
            <li>
                <h3>18:00<span>2月19日</span></h3>
                <dl> <dt>任务1.3</span></dt> </dl>
            </li>
            <li class="green">
                <h3>22:00<span>2月19日</span></h3>
                <dl> <dt>任务1.4</span></dt> </dl>
            </li>
        </ul>
    </div>
    <div class="history-date">
        <ul>
            <h2 class="date02"> <a href="#nogo">2月20日</a> <b>任务二</b></h2>
            <li class="green">
                <h3>10:00~11:30<span>2月20日</span></h3>
                <dl> <dt>任务2.1</span></dt> </dl>
            </li>
            <li>
                <h3>12:00~13:30<span>2月20日</span></h3>
                <dl> <dt>任务2.2</span></dt> </dl>
            </li>
            <li>
                <h3>15:00~16:30<span>2月20日</span></h3>
                <dl> <dt>任务2.3</dt> </dl>
            </li>
            <li class="green">
                <h3>18:30~20:30<span>2月20日</span></h3>
                <dl> <dt>任务2.4</span></dt> </dl>
            </li>
        </ul>
    </div>
</div>

时间线盒子为一个DIV,其class值是history

每日时间线区域为一个DIV,其class值是history-date

我们注意到,第一个h2标签的class值是first,而后面的h2标签的class值是date02,是因为时间线上第一个日期显示的图标和文字样式跟后面日期显示的有所不同,看下图。

列表标签li默认无class属性,当它的class值是green时,该时间点的时间颜色就变成绿色,该时间点的文字就变得较大。

jQuery

本实例用到jQuery编程,但当你无需任何效果(如折叠时间线)时,则无需用到jQuery编程,仅需用CSS来实现。

本实例jQuery编程写在一个js文件里,所以你需要引用两个文件。若无需用到jQuery编程,则可删除如下两行代码。

<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;
}

时间线上用到几个图片,均在CSS里设置。

.history 定义时间线盒子DIV的样式。

.history-date 定义时间线日期区域DIV的样式。

.history-date h2 定义时间线日期标签的样式。

.history-date h2.first 是定义时间线第一个日期标签的样式。

.history-date h2.date02 是定义时间线除第一个日期外的其余日期标签样式。

 .history-date ul li 定义时间线列表标签样式。

.history-date ul li h3 定义时间线上时间的样式。

总结

本文介绍了一款具有日期和具体钟点时间的时间线/时间轴,可满足需要具体到钟点时间的如日常工作/计划任务等需求。

本实例代码,你可以只保留CSS部分来完成一个静态的时间线设计,也可以多保留JS部分来做一些个性化的交互效果。

您可能对以下文章也感兴趣

标签: 时间线  Timeline  
x
x
  • 站长推荐