• 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>

    　　

     SIMILE Widgets | Timeline | Examples (dusystem.com)

    from: 

    https://github.com/squarechip/timeline
    https://squarechip.github.io/timeline/#vertical-demo

    <!doctype html>
<html lang="en">
  <head>
    <!-- Page structure from the Twitter Bootstrap starter template: https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template
https://timeline.knightlab.com/docs/index.html
https://github.com/NUKnightLab/TimelineJS3
-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Timeline examples: Autoloading Timeline Slideshow</title>
    <link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
    <script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
  </head>
  <body>
    <div class="container">
        <h1>TimelineJS3 Examples</h1>
        <h2>Slideshow</h2>
        <div class="row">
            <div class="col">
              <div id="timeline-embed" style=" 100%; height: 600px"></div>
            </div> <!-- .col -->
        </div> <!-- .row -->
    </div>

    <script type="text/javascript">
		
		 var additionalOptions = {
                script_path: 'https://cdn.knightlab.com/libs/timeline3/latest/js',
                language: 'zh-cn', //简体中文  涂聚文 Geovin Du
                font: 'amatic-andika'
            }
		 
        const timeline = new TL.Timeline('timeline-embed',
        'https://docs.google.com/spreadsheets/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/edit?usp=drive_web&ouid=113808851972646275751',additionalOptions);

        const loadNextSlide = function() {
            try {
                timeline.goToNext();
            } catch(err) {
                if (err instanceof TypeError) {
                    console.log(err.message);
                    if (err.message === "Cannot read property 'unique_id' of undefined") {
                        timeline.goToStart();
                    }
                }
            }
        };

        setInterval(loadNextSlide, 5000);
    </script>
  </body>
<html>

    　　
  • 相关阅读:
    is quoted with ["] which must be escaped when used within the value
    QueryDSL与SpringDataJPA复杂查询
    遍历list，同时remove不符合条件的元素
    解决AnnotationTransactionAttributeSource is only available on Java 1.5 and highe
    Windows系统安装MySQL
    sqlyog导sql文件
    myeclipse导入maven项目
    Invalid 'log4jConfigLocation' parameter: class path resource [log4j.xml] cannot be resolved to URL because it does not exist
    Nginx SSL+tomcat集群,取不到https正确协议
    微信开发之通过代理调试本地项目
  • 原文地址：https://www.cnblogs.com/geovindu/p/16197346.html
Copyright © 2020-2023  润新知