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="width: 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>
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）
