JavaScript：TimelineJs

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!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>

　　

 

posted @   ®Geovin Du Dream Park™  阅读(95)  评论(0)  编辑  收藏  举报
相关博文：
·  javascript: TimelineJS3 Examples
·  html5 css timeline horizontal
·  vis.js时间轴
·  TimeLine 时间轴 网站 分享 time.graphics - nodejs 10年图
·  Html+Css+js实现春节倒计时效果（移动端和PC端）
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2018-04-27 SQL Server: create table sql script
2014-04-27 csharp:Google TTS API text to speech
2014-04-27 Csharp: speech to text, text to speech in win
2011-04-27 Create virtual keyboard using C# Winform Application
2011-04-27 BinaryReader,BinaryWriter
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示