JavaScript：TimelineJs
2022/4/27 1:12:49
本文主要是介绍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
这篇关于JavaScript：TimelineJs的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-06-26结对编程到底难不难？答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图，怎么办？
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗？
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡？
- 2024-05-31全网首发第二弹！软考2024年5月《软件设计师》真题+解析+答案！（11-20题）
- 2024-05-31全网首发！软考2024年5月《软件设计师》真题+解析+答案！（21-30题）
