⽔平时间轴css代码_使⽤CSS和JavaScript构建⽔平时间线⽔平时间轴css代码
在上⼀篇 ，我向您展⽰了如何从头开始构建响应式垂直时间轴。 今天，我将介绍创建相关的⽔平时间线的过程。
与往常⼀样，要初步了解我们将要构建的内容，请查看相关的CodePen演⽰（请查看以获得更好的体验）：
我们有很多内容需要介绍，所以让我们开始吧！
1. HTML标记
标记与我们为垂直时间轴定义的标记相同，除了以下三点：
我们使⽤有序列表⽽不是⽆序列表，因为在语义上更正确。
还有⼀个额外的列表项（最后⼀个）为空。 在下⼀部分中，我们将讨论原因。
还有⼀个额外的元素（即.arrows ）负责时间轴导航。
这是必需的标记：
<section class="timeline">
<ol>
<li>
<div>
<time>1934</time>
Some content here
</div>
</li>
<!-- more list items here -->
<li></li>
</ol>
<div class="arrows">
<button class="arrow arrow__prev disabled" disabled>
<img src="arrow_prev.svg" alt="prev timeline arrow">
</button>
<button class="arrow arrow__next">
<img src="arrow_next.svg" alt="next timeline arrow">
</button>
</div>
</section>
时间轴的初始状态如下所⽰：
2.添加初始CSS样式
为了简单起见，在这⾥省略了⼀些基本的字体样式，颜⾊样式等之后，我们指定了⼀些结构性CSS规则：
.timeline {
white-space: nowrap;
overflow-x: hidden;
}
.timeline ol {
font-size: 0;
width: 100vw;
padding: 250px 0;
transition: all 1s;
}
.timeline ol li {
position: relative;
display: inline-block;
list-style-type: none;
width: 160px;
height: 3px;
background: #fff;
}
.timeline ol li:last-child {
width: 280px;
}
.
timeline ol li:not(:first-child) {
margin-left: 14px;
}
.timeline ol li:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
left: calc(100% + 1px);
bottom: 0;
width: 12px;
height: 12px;
transform: translateY(-50%);
border-radius: 50%;
background: #F45B69;
}
在这⾥最重要的是，您会注意到两件事：
我们为列表分配较⼤的顶部和底部填充。 再次，我们将在下⼀节中解释为什么会发⽣这种情况。
正如您将在以下演⽰中注意到的那样，由于列表的width: 100vw ，其⽗级的overflow-x: hidden ，因此，此时我们⽆法看到所有列表项。 这有效地“掩盖”了列表项。 但是，由于有了时间轴导航，我们以后才能浏览所有项⽬。
有了这些规则，这就是时间轴的当前状态（没有任何实际内容，以使情况保持清楚）：
3.时间轴元素样式
⾄此，我们将对div元素（从现在开始将它们称为“时间轴元素”）进⾏样式设置，这些元素属于列表项
以及它们的::before伪元素。
另外，我们将使⽤:nth-child(odd)和:nth-child(even) CSS伪类来区分奇数和偶数div的样式。
如何启用javascript功能
以下是时间轴元素的常⽤样式：
position: absolute;
left: calc(100% + 7px);
width: 280px;
padding: 15px;
font-size: 1rem;
white-space: normal;
color: black;
background: white;
}
.timeline ol li div::before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
}
然后是⼀些奇怪的样式：
.
timeline ol li:nth-child(odd) div {
top: -16px;
transform: translateY(-100%);
}
.timeline ol li:nth-child(odd) div::before {
top: 100%;
border-width: 8px 8px 0 0;
border-color: white transparent transparent transparent;
}
最后是⼀些偶数样式：
.timeline ol li:nth-child(even) div {
top: calc(100% + 16px);
}
.timeline ol li:nth-child(even) div::before {
top: -8px;
border-width: 8px 0 0 8px;
border-color: transparent transparent transparent white;
}
这是时间轴的新状态，再次添加了内容：
您可能已经注意到，时间轴元素是绝对定位的。 这意味着它们已从常规⽂档流中删除。 考虑到这⼀点，为了确保显⽰整个时间轴，我们必须为列表设置较⼤的顶部和底部填充值。 如果我们不应⽤任何填充，时间线将被裁剪：
4.时间线导航样式
现在该设置导航按钮的样式了。 请记住，默认情况下，我们禁⽤上⼀个箭头，并为其赋予disabled类。
以下是相关CSS样式：
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.timeline .arrows .arrow__prev {
margin-right: 20px;
}
.timeline .disabled {
opacity: .5;
}
.timeline .arrows img {
width: 45px;
height: 45px;
}
上⾯的规则为我们提供了以下时间表：
5.增加互动性
时间轴的基本结构已准备就绪。 让我们添加⼀些交互性！
变数
⾸先，我们设置了⼀堆变量，稍后将使⽤它们。
const timeline = document.querySelector(".timeline ol"),
elH = document.querySelectorAll(".timeline li > div"),
arrows = document.querySelectorAll(".timeline .arrows .arrow"),
arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"),  arrowNext = document.querySelector(".timeline .arrows .arrow__next"),  firstItem = document.querySelector(".timeline li:first-child"),
lastItem = document.querySelector(".timeline li:last-child"),
xScrolling = 280,
disabledClass = "disabled";
初始化事物
当所有页⾯资产准备就绪时，将调⽤init函数。
window.addEventListener("load", init);
此功能触发四个⼦功能：
function init() {
setEqualHeights(elH);
animateTl(xScrolling, arrows, timeline);
setSwipeFn(timeline, arrowPrev, arrowNext);
setKeyboardFn(arrowPrev, arrowNext);
}
稍后我们将看到，这些功能中的每⼀个都完成特定的任务。
等⾼时间轴元素
如果您跳回到上 ，您会注意到时间轴元素的⾼度不相等。 这不会影响我们时间轴的主要功能，但是如果所有元素的⾼度都相同，您可能会更喜欢它。 为了实现这⼀点，我们可以通过CSS（简单的解决⽅案）为它们提供固定的⾼度，或者通过JavaScript为它们提供与最⾼元素的⾼度相对应的动态⾼度。
第⼆个选项更加灵活和稳定，因此这是⼀个实现此⾏为的函数：
function setEqualHeights(el) {
let counter = 0;
for (let i = 0; i < el.length; i++) {
const singleHeight = el[i].offsetHeight;
if (counter < singleHeight) {
counter = singleHeight;
}
}
for (let i = 0; i < el.length; i++) {
el[i].style.height = `${counter}px`;
}
}
此函数检索最⾼时间轴元素的⾼度，并将其设置为所有元素的默认⾼度。
演⽰的外观如下：
6.动画时间线
现在，让我们集中讨论时间轴动画。 我们将逐步构建实现此⾏为的功能。
⾸先，我们为时间线按钮注册⼀个click事件：
function animateTl(scrolling, el, tl) {
for (let i = 0; i < el.length; i++) {
el[i].addEventListener("click", function() {
// code here
});
}
}
每次单击按钮时，我们都会检查时间轴按钮的禁⽤状态，如果未禁⽤它们，则将其禁⽤。 这样可以确保在动画结束之前，仅两次单击两个按钮。
因此，就代码⽽⾔，点击处理程序最初包含以下⼏⾏：
if (!arrowPrev.disabled) {
arrowPrev.disabled = true;
}
if (!arrowNext.disabled) {
arrowNext.disabled = true;
}
后续步骤如下：
我们检查这是否是我们第⼀次单击按钮。 同样，请记住，默认情况下上⼀个按钮是禁⽤的，因此最初可以单击的唯⼀按钮是下⼀个按钮。
如果确实是第⼀次，我们将使⽤transform属性将时间轴向右移动280px。 xScrolling变量的值确定移动量。
相反，如果我们已经单击了⼀个按钮，则将检索时间轴的当前transform值，并向该值添加或移除所需的移动量（即280px）。 因此，只要单击上⼀个按钮， transform属性的值就会减⼩，并且时间线会从左移到右。 但是，单击下⼀个按钮时， transform属性的值增加，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。