0

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

4

2 回答 2

1

Timeline JS可能正是您正在寻找的。由于它是开源工具，您可以根据需要对其进行修改。

于 2013-09-08T13:26:09.833 回答
0

我会做很多划分，每个部分（在这种情况下是一年）的时间线。所以会有大约 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，“文本”，例如在html中，将事件onmouseover添加到2个时间线分区，然后添加一个函数。功能已编号。

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

现在我们需要编写函数。我们将创建一个包含整个“文本”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 代码将更改整个“文本”部分，使其成为影响您在 javascript 中输入的整个文本（“某些文本”部分）的 CSS 部分。如果您希望 CSS 保持不同，您应该：

  1. 为每个段落制作自己的 id（在 html 中）。

  2. 然后在javascript中为每个id创建一个新变量。

  3. 然后为每个函数添加一个新行，这将单独更改新段落的内部 HTML。

如果有不清楚的地方，请询问。

于 2013-09-08T14:00:26.043 回答