7 个使用Javascript 和 CSS 开发的漂亮时间轴

webphp 10年前
     时间线(timeline)是将一系列按照时间发生的事件拖放在一条直线上,来使用户直观的看出事件的先后关系。时间线一词还用来形容按照时间排列的年度报表或者其他文档。    <h4>1. Simile Widgets</h4>    <p><img class="aligncenter size-full wp-image-3538" title="similejpg" alt="" src="https://simg.open-open.com/show/25989dfb5a396284df1d838107d50f67.jpg" width="620" height="200" /></p>    <div style="text-align:right;">     <strong><a href="/misc/goto?guid=4958191926410815363">View Demo</a></strong>    </div>    <h3 style="color:#fff;clear:both;">.</h3>    <h4>2. Timeglider</h4>    <p><img class="aligncenter size-full wp-image-3540" title="timeglider" alt="" src="https://simg.open-open.com/show/f02e50d979f8a3459c73d64e586418ee.jpg" width="620" height="200" /></p>    <div style="text-align:right;">     <strong><a href="/misc/goto?guid=4958191927181165826">View Demo</a></strong>    </div>    <h3 style="color:#fff;clear:both;">.</h3>    <h4>3. Woorktuts</h4>    <p><img class="aligncenter size-full wp-image-3541" title="woorktuts" alt="" src="https://simg.open-open.com/show/e880f7a7bd309f90624db0d1f5f1781f.jpg" width="620" height="200" /></p>    <div style="text-align:right;">     <strong><a href="/misc/goto?guid=4958191927921731082">View Demo</a></strong>    </div>    <h3 style="color:#fff;clear:both;">.</h3>    <h4>4. Tiki Toki</h4>    <p><img class="aligncenter size-full wp-image-3539" title="tiki" alt="" src="https://simg.open-open.com/show/f5d8d72ca8980a1fd7f33e9dd98d2c28.jpg" width="620" height="200" /></p>    <div style="text-align:right;">     <strong><a href="/misc/goto?guid=4958191928652193478">View Demo</a></strong>    </div>    <h3 style="color:#fff;clear:both;">.</h3>    <h4>5. Google 10 Year Timeline</h4>    <p><img class="aligncenter size-full wp-image-3534" title="10year" alt="" src="https://simg.open-open.com/show/fd0e897e7c5b1f9d52c95d3dfbcb3468.jpg" width="620" height="200" /></p>    <div style="text-align:right;">     <strong><a href="/misc/goto?guid=4958191929392613938">View Demo</a></strong>    </div>    <h3 style="color:#fff;clear:both;">.</h3>    <h4>6. Bluelinemedia Timeline</h4>    <p><img class="aligncenter size-full wp-image-3536" title="bluemedia" alt="" src="https://simg.open-open.com/show/417eed677cc5755a026e48482f0f88d4.jpg" width="620" height="200" /></p>    <div style="text-align:right;">     <strong><a href="/misc/goto?guid=4958191930139365063">View Demo</a></strong>    </div>    <h3 style="color:#fff;clear:both;">.</h3>    <h4>7. Pure Css Timeline</h4>    <p><img class="aligncenter size-full wp-image-3537" title="purecss" alt="" src="https://simg.open-open.com/show/0aa8afbe9be6fa77695351835e2a6d7c.jpg" width="620" height="200" /></p>    <div style="text-align:right;">     <strong><a href="/misc/goto?guid=4958191928652193478">View Demo</a></strong>    </div> 转自:    <a href="/misc/goto?guid=4958191931558363042" target="_blank">http://www.webdeveloperjuice.com/2011/09/28/7-beautiful-web-based-timeline-using-javascript-and-css/</a>