前言

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

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

一、使用的的外部库

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.效果

未选中状态

选中状态：

html 时间轴线相关推荐

[知识图谱实战篇] 八.HTML+D3绘制时间轴线及显示实体
前面作者讲解了很多知识图谱原理知识,包括知识图谱相关技术.Neo4j绘制关系图谱等,但仍缺少一个系统全面的实例.为了加深自己对知识图谱构建的认识,为后续创建贵州旅游知识图谱打下基础,作者深入学习了张宏 ...
SVG—初识3之SVG动画（缓动动画、时间轴线、时间交错）
SVG-初识3 SVG动画使用GSAP制作动画缓动动画时间轴线时间交错 SVG动画 Transform(scale.rotate.translate .skew) 路径动画 (path) 描边 ...
vue canvas typescript 绘制时间标尺
项目中有个需求,将对象一天内对应的不同的状态在时间轴上显示出来.调研的方案有5种, 1.时间轴用div画,时间轴上遮罩的状态改变则改变时间轴div本身的颜色. 2.时间轴用div画,时间轴上的遮罩用d ...
Flutter时间轴-首个
一,真实点,直接上图吧. github地址视频教学地址 1.位置,上图可见,时间轴可以在左边,也可以在中间,当然了可以在任何位置. 2.时间轴样式,当然了我们时间轴比仅仅限制为一个圆圈是吧,当然了你 ...
FFmpeg之视频封装格式、流媒体协议、视频编解码协议和传输流格式、时间戳和时间基、视频像素数据
通用视频分析工具:Mediainfo.Elecard StreamEye(视频编码分析工具); 视频封装格式: ********************MP4****************** MP ...
css+vue绘制蛇形时间轴曲线
蛇形时间轴线图绘制本人在之前的项目中(vue项目),由于业务需求根据设计图自行利用css样式绘制了一个简单的时间轴线图,可自适应收缩并且左右来回循环,在某些方面可满足大部分的需求,并且添加了图例,特 ...
Echarts 动态数据+时间轴格式化
最近再项目中遇到实时绘制数据波形图,设计到echarts 的时间轴问题,下面是绘制的图我们直接看option配置项后面画红框的为x横轴时间轴线格式化的重要部分,你可以根据设计原图的格式化自己想要的 ...
仿呱呱购物流时间轴效果(swift)
仿呱呱购物流时间轴效果(swift): 在呱呱购App二期的优化过程中,发现物流信息详情界面显示的不太友好,由此,修改了部分代码使cell实现自适应,完美显示具体的物流轨迹.我使用了快递鸟的api,将 ...
Nature子刊：使用MinION快速分析早产儿肠道菌群谱并鉴定抗生素抗性致病菌
简介标题:使用MinION快速分析早产儿肠道菌群谱并鉴定抗生素抗性致病菌杂志:Nature Microbiology 影响因子:1 ...

html 时间轴线

前言

一、使用的的外部库

二、代码

1.html

2.css

3.js

4.效果

html 时间轴线相关推荐

最新文章

热门文章