如何使用HTML、CSS和JavaScript制作时间轴？

Question

是否可以使用HTML、CSS和JavaScript/jQuery制作时间轴？

请提供一些有用的教程链接，谢谢。

- Ashish Saxena

---

可以，但我认为如果没有你已经尝试过的证据，没有人会愿意仅仅为你在谷歌上进行研究。 - WraithNath

下面是一个仅包含链接的答案，指向此资源(http://simile.mit.edu/timeline/docs/create-timelines.html)。由于它可能会被删除，因此我在这里提供了链接。 - halfer

Answer 1

这里是一个带有 CSS 过渡效果的简单垂直时间轴。

只需复制并粘贴即可。 http://jsfiddle.net/yinnette/XdQ5Y/

以下是 HTML 代码：

            <!-- You will need to convert css to LESS -->
            <div class="timeline">
                <div class="timeline-item active">
                    <div class="year">2008 <span class="marker"><span class="dot"></span></span>
                    </div>
                    <div class="info">That song the artist formerly known as prince sang no longer applies.</div>
                </div>
                <div class="timeline-item">
                    <div class="year">2008 <span class="marker"><span class="dot"></span></span>
                    </div>
                    <div class="info">The in-house Gawker chat room is filled with photos of Rob Ford, and for one reason: Rob Ford takes a good goddamn photo.</div>
                </div>
                <div class="timeline-item">
                    <div class="year">2008 <span class="marker"><span class="dot"></span></span>
                    </div>
                    <div class="info">That song the artist formerly known as prince sang no longer applies.</div>
                </div>
                <div class="timeline-item">
                    <div class="year">2008 <span class="marker"><span class="dot"></span></span>
                    </div>
                    <div class="info">The in-house Gawker chat room is filled with photos of Rob Ford, and for one reason.The in-house Gawker chat room is filled with photos of Rob Ford, and for one reason.The in-house Gawker chat room is filled with photos of Rob Ford, and for one reason.</div>
                </div>
            </div>

这是 CSS：

            div {
                font-family: Helvetica, Arial, sans-serif;
                box-sizing: border-box;
            }
            .timeline {
                width: 400px;
            }
            .timeline .timeline-item {
                width: 100%;
            }
            .timeline .timeline-item .info, .timeline .timeline-item .year {
                color: #eee;
                display: block;
                float:left;
                -webkit-transition: all 1s ease;
                -moz-transition: all 1s ease;
                transition: all 1s ease;
            }
            .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {
                color: #ccc;
                -webkit-transition: all 1s ease;
                -moz-transition: all 1s ease;
                transition: all 1s ease;
            }
            .timeline .timeline-item .year {
                font-size: 24px;
                font-weight: bold;
                width: 22%;
            }
            .timeline .timeline-item .info {
                width: 100%;
                width: 78%;
                margin-left: -2px;
                padding: 0 0 40px 35px;
                border-left: 4px solid #aaa;
                font-size: 14px;
                line-height: 20px;
            }
            .timeline .timeline-item .marker {
                background-color: #fff;
                border: 4px solid #aaa;
                height: 20px;
                width: 20px;
                border-radius: 100px;
                display: block;
                float: right;
                margin-right: -14px;
                z-index: 2000;
                position: relative;
            }
            .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {
                color: #444;
                -webkit-transition: all 1s ease;
                -moz-transition: all 1s ease;
                transition: all 1s ease;
            }
            .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {
                color: #9DB668;
            }
            .timeline .timeline-item .marker .dot {
                background-color: white;
                -webkit-transition: all 1s ease;
                -moz-transition: all 1s ease;
                transition: all 1s ease;
                display: block;
                border: 4px solid white;
                height: 12px;
                width: 12px;
                border-radius: 100px;
                float: right;
                z-index: 2000;
                position: relative;
            }
            .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
                -webkit-transition: all 1s ease;
                -moz-transition: all 1s ease;
                transition: all 1s ease;
                background-color: #9DB668;
                box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
            }

这是 JQuery：

            $(".timeline-item").hover(function () {
                $(".timeline-item").removeClass("active");
                $(this).toggleClass("active");
                $(this).prev(".timeline-item").toggleClass("close");
                $(this).next(".timeline-item").toggleClass("close");
            });

- Yinnette

Answer 2

要注意，在 FireFox 中，你需要在“.timeline”上设置 margin-left 为 86px。

 .timeline .timeline-item .info 
     {
         width: 100%;
         width: 78%;
         margin-left: 86px;
         padding: 0 0 40px 35px;
         border-left: 4px solid #aaa;
         font-size: 14px;
         line-height: 20px;
       }

- As3uS