JavaScript：TimelineJs
<!DOCTYPE html> <html lang=en-GB> <head> <meta charset=utf-8> <meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1 /> <title>Timeline Prototype</title> <meta name=description content=A JavaScript horizontal / vertical timeline component plugin /> <meta name=Keywords content=geovindu,Geovin Du,涂聚文/> <link href=css/style.min.css rel=stylesheet /> <link href=css/prettyprint.min.css rel=stylesheet /> <link href=css/timeline.min.css rel=stylesheet /> <link href=https://fonts.googleapis.com/css?family=Lato:400,700 rel=stylesheet /> </head> <body> <section class=page-section id=horizontal-demo> <div class=container> <h2>Horizontal timeline demo</h2> <p>A horizontal timeline with 4 visible items, which changes to the vertical mode at an 800px resolution.</p> <div class=timeline id=timeline-horizontal> <div class=timeline__wrap> <div class=timeline__items> <div class=timeline__item> <div class=timeline__content> <h2>2020</h2> <p>武汉疫情突发.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2018</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2015</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2014</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2012</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2010</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2007</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2004</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2002</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2000</h2> <p>来深圳流浪.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>1993</h2> <p>来常州流浪.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>1977</h2> <p>流浪到地球.</p> </div> </div> </div> </div> </div> </div> </section> <script src=js/3.3.1/jquery.min.js></script> <script src=js/timeline.min.js></script> <script src=js/prettify.min.js></script> <script src=js/main.min.js></script> <script async defer src=js/buttons.js></script> <script> timeline(document.querySelectorAll('#timeline-horizontal'), { forceVerticalMode: 800, mode: 'horizontal', visibleItems: 4 }); timeline(document.querySelectorAll('#timeline-vertical'), { verticalStartPosition: 'right', verticalTrigger: '150px' }); </script> </body> </html>
<!DOCTYPE html> <html lang=en-GB> <head> <meta charset=utf-8> <meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1 /> <title>Timeline Prototype</title> <meta name=description content=A JavaScript horizontal / vertical timeline component plugin /> <meta name=Keywords content=geovindu,Geovin Du,涂聚文/> <link href=css/style.min.css rel=stylesheet /> <link href=css/prettyprint.min.css rel=stylesheet /> <link href=css/timeline.min.css rel=stylesheet /> <link href=https://fonts.googleapis.com/css?family=Lato:400,700 rel=stylesheet /> </head> <body> <section class=page-section id=vertical-demo> <div class=container> <h2>Vertical timeline demo</h2> <p>A vertical timeline with the first item aligned to the right and the elements set to come into view 150px from the bottom of the window</p> <div class=timeline id=timeline-vertical> <div class=timeline__wrap> <div class=timeline__items> <div class=timeline__item> <div class=timeline__content> <h2>2020</h2> <p>武汉疫情突发.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2018</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2015</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2014</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2012</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2010</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2007</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2004</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2002</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>2000</h2> <p>来深圳流浪.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>1993</h2> <p>来常州流浪.</p> </div> </div> <div class=timeline__item> <div class=timeline__content> <h2>1977</h2> <p>流浪到地球.</p> </div> </div> </div> </div> </div> </div> </section> <script src=js/3.3.1/jquery.min.js></script> <script src=js/timeline.min.js></script> <script src=js/prettify.min.js></script> <script src=js/main.min.js></script> <script async defer src=js/buttons.js></script> <script> timeline(document.querySelectorAll('#timeline-horizontal'), { forceVerticalMode: 800, mode: 'horizontal', visibleItems: 4 }); timeline(document.querySelectorAll('#timeline-vertical'), { verticalStartPosition: 'right', verticalTrigger: '150px' }); </script> </body> </html>
from:
https://github.com/squarechip/timeline
https://squarechip.github.io/timeline/#vertical-demo