我是一名设计师，但我也做一些编程（javascript、html、css）。我需要为网站创建自定义时间线（由于此处声誉不足，无法发布照片，但这里有一个设计链接：http://postimg.org/image/5p92wkk8f/ 就像您将鼠标悬停在时间线的一部分上，并根据一年的变化）但我不知道从哪里开始。 （我尝试在互联网上查找它，但没有时间线代码示例，我不想从其他网站生成时间线，我想制作一个与此设计完全相同的自定义时间线）。谁能给我提示，说些有用的话，告诉我从哪里开始？谢谢！
【问题讨论】：
标签： javascript jquery css timeline
Timeline JS 可能正是您正在寻找的。由于它是开源工具，您可以根据需要对其进行修改。
【讨论】：
我会划分很多部分，时间线的每个部分（在本例中为年份）一个。所以会有大约 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 保持不同，您应该：
为每个段落制作自己的 id（在 html 中）。
然后在javascript中为每个id创建一个新变量。
然后在每个函数中添加一个新行，这将单独更改新段落的内部HTML。
如果有不清楚的地方，请询问。
【讨论】：