html 时间轴线

最新推荐文章于 2024-06-15 23:55:05 发布

ly_zszcyx

最新推荐文章于 2024-06-15 23:55:05 发布

阅读量2.3k

点赞数 1

分类专栏：前端文章标签： html css js

本文链接：https://blog.csdn.net/qq_41722795/article/details/117113237

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

参考文章： https://blog.csdn.net/weixin_40687883/article/details/80388420

前言

纯手工制作时间轴，暂展示固定的时间

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用的的外部库

jquery

二、代码

1.html

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作时间线</title>
    <link rel="stylesheet" type="text/css" href="../css/createTimeLine.css"/>
    <script type="text/javascript" src="../../3dLib/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../js/createTimeLine.js"></script>
</head>
<body>
    <div class="nf-container-layout">
        <div class="track-rcol">
            <div class="track-list">
                <ul>
                    <li class="first">
                        <i class="node-icon"></i>
                        <span class="time">2021</span>
                    </li>
                    <li>
                        <i class="node-icon"></i>
                        <span class="time">2020</span>
                    </li>
                    <li>
                        <i class="node-icon"></i>
                        <span class="time">2019</span>
                    </li>
                    <li>
                        <i class="node-icon"></i>
                        <span class="time">2018</span>
                    </li>
                    <li>
                        <i class="node-icon"></i>
                        <span class="time">2017</span>
                    </li>
                    <li>
                        <i class="node-icon"></i>
                        <span class="time">2016</span>
                    </li>
                    <li>
                        <i class="node-icon"></i>
                        <span class="time">2015</span>
                    </li>
                    <li>
                        <i class="node-icon"></i>
                        <span class="time">2014</span>
                    </li>
                    <li class="last">
                        <i class="node-icon"></i>
                        <span class="time">2013</span>
                    </li>
                </ul>
            </div>

        </div>

    </div>
    
</body>
</html>

2.css

代码如下（示例）：


.nf-container-layout{
    float: left;
    margin-top: 15px;
    /* width: 100px; */
    
}

.track-rcol {
    /* width: 100%; */
    /* border: 1px solid #eee;
     */
     width: 100px;
}

.track-list {
    /* margin: 20px; */
    padding-left: 5px;
    position: relative;
}

.track-list li {
    list-style: none;/*去掉li 自带的伪元素 ::marker;*/
    position: relative;
    height: 80px;
    padding: 0px 0 0 25px;
    line-height: 18px;
    border-left: 1px solid #4a665a; /* 设置线的颜色*/
    color: #999;
}


.track-list li.first {
    /* color: red; */
    padding-top: 0;
    /* border-left-color: #fff; */
}

.track-list li.last {
    /* color: red; */
    padding-top: 0;
    border-left: none;
}

.track-list li .node-icon {
    position: absolute;
    left: -6px;
    /* top: 50%; */
    width: 10px;
    height: 10px;
    /* background: url(img/trank.png) -21px -72px no-repeat; */
    background: #b9ffe1;
    border-radius: 5px;
}

.track-list li .node-icon.selected {
    position: absolute;
    left: -10px;
    /* top: 50%; */
    width: 20px;
    height: 20px;
    background: #00fe92;
    border-radius: 10px;
}

.track-list li.first .node-icon {
    background-position: 0 -72px;
}

.track-list li .time {
    margin-right: 20px;
    position: relative;
    top: -5px;
    display: inline-block;
    vertical-align: middle;
    
}

.track-list li .time.selected {
    margin-right: 20px;
    position: relative;
    top: -5px;
    display: inline-block;
    vertical-align: middle;
    color: #00fe92;
}

.track-list li .txt {
    position: relative;
    top: 4px;
    display: inline-block;
    vertical-align: middle;
}

.track-list-selected-txt{
    color: #000000;
    width: 10px;
    padding: 3px;
}

.track-list li.first .time {
    margin-right: 20px;
}

.track-list li.first .txt {
    max-width: 600px;
}

3.js

$(function(){


    //时间轴选中状态
    $(".track-list li").off("click").on("click", function(evt){
        var $target = evt.currentTarget;
        var currTxt = $target.innerText;
        var elemList = $target.parentElement.children;
        for(var i= 0; i< elemList.length; i++)
        {
            if(elemList[i].innerText == currTxt)
            {
                $(elemList[i]).children("i").addClass("selected");
                $(elemList[i]).children("i").empty();
                $(elemList[i]).children("i").append("<span class='track-list-selected-txt'>V</span>");
                $(elemList[i]).children("span").addClass("selected");
            }
            else
            {
                $(elemList[i]).children("i").removeClass("selected");
                $(elemList[i]).children("i").empty();
                $(elemList[i]).children("span").removeClass("selected");
            }
        }

    });

});

4.效果

未选中状态

选中状态：

ly_zszcyx

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
html 时间轴线

参考文章：https://blog.csdn.net/weixin_40687883/article/details/80388420目录前言一、使用的的外部库二、代码1.html2.css3.js4.效果前言纯手工制作时间轴，暂展示固定的时间提示：以下是本篇文章正文内容，下面案例可供参考一、使用的的外部库jquery二、代码1.html代码如下（示例）：<!DOCTYPE html><html...
复制链接

扫一扫

专栏目录