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

Question

Is it possible to make a timeline using HTML, CSS and JavaScript/jQuery?

Kindly reply with the links of some useful tutorials.

Answer 1

Here is a simple vertical timeline with css transitions.

Just copy and paste. http://jsfiddle.net/yinnette/XdQ5Y/

Here is the 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>

Here is the 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);
            }

Here is the 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

You might want to consider this:

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

or any of these too:

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

Answer 3

Beware with FireFox you need put margin-left at 86px on ".timeline"

 .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;
       }