Question

我是一名设计师，但我也做了一些编程（javascript，html，css）。我需要为网站创建一个自定义时间轴（由于此处的声誉不足，无法发布照片，但这里有设计链接：http://postimg.org/image/5p92wkk8f/就像你将鼠标悬停在时间轴的一部分上一样，根据年份的变化）但我不知道从哪里开始。（我尝试在互联网上查找它，但没有时间轴代码示例，我不想从其他网站生成时间轴，我想制作一个与此设计完全相同的自定义）。有人能给我提示，说有用的东西，告诉我从哪里开始？谢谢！

Answer 1

Timeline JS可能正是您所寻找的。作为开源工具，您可以根据需要进行修改。

Answer 2

我会为时间线的每个部分（本例中为年份）制作多个部门。因此，将有大约20个div共同构成整个白线。

CSS类似于：

.timeline { /*"timeline" is a class name that I made up.*/
    background-color:#ffffff; /* This is white color, change it to the cream color of the timeline.*/
    height: 30px; /*estimation*/
    width: 30px; /*estimation*/
    position:absolute;
}


.timeline:hover {
    background-color:#000000; /* This is black color, change it to the brownish background color.*/
}

这只是CSS的一部分。您需要为每个部门设置边距。完成CSS代码后，您将使用时间轴更改您悬停的每个div的颜色。

更难的部分实际上是更改文本，为此我们将使用javascript。为了使代码不会太长（并且我更容易编写），我将编写它，好像时间轴中只有2个分区。一旦你完成了我的工作，你就可以轻松完成它。

首先，将id添加到文本所在的分区，“text”，例如在html中，将事件onmouseover添加到2个时间轴分区，然后添加一个函数。功能已编号。

<div id="text">Here is some text</div>
<div class="timeline" onmouseover="changeText1()"></div>
<div class="timeline" onmouseover="changeText2()"></div>

现在我们需要编写函数。我们将创建一个包含整个“text”id的变量，然后创建2个函数（每个div一个）并使每个函数根据函数的数量更改文本。

var text_div=document.getElementById("text");
function changeText1()
{
    text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the FIRST part of the timeline.
}
function changeText2()
{
    text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the SECOND part of the timeline.
}

让我们回顾一下。 CSS会在悬停时使分区改变颜色。此外，当时间轴的划分悬停时，它将触发javascript代码中的函数，该函数将更改文本，根据哪个分区被悬停。

您应该注意的另一件事是：在您添加的图像中，没有一个段落，每个段落都有不同的CSS代码。我写的javascript代码将改变整个“文本”分区，使得CSS成为您在javascript（“Some Text”部分）中输入的整个文本的影响。如果您希望CSS保持不同，您应该：

为每个段落创建自己的id（在html中）。
然后在javascript中为每个id创建一个新变量。
然后为每个函数添加一个新行，这将分别更改新段落的内部HTML。

如果不清楚，请询问。

为网站制作我自己的自定义时间表

2 个答案: