Question

是否可以使用HTML，CSS和JavaScript / jQuery创建时间轴？

请回复一些有用教程的链接。

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");
            });

Answer 2

您可能需要考虑这个问题：

http://functionn.blogspot.com/2012/03/timeline-javascript-library-for.html

或其中任何一个：

http://functionn.blogspot.com/search/label/timelines

Answer 3

小心使用FireFox，您需要在“.timeline”

上将剩余边距放在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;
       }

如何使用HTML，CSS和JavaScript制作时间表？

3 个答案: