iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 27
0
Modern Web

30天學習30套前端技術(2018年)系列 第 27

[十分鐘學習] Timeline.js - 時間軸

example1
jQuery時間軸套件,使用簡單是它的優點

GitHub Star: 469
Javascripting Overall: -
瀏覽器: ChromeFirefoxIE10+
RWD: 支援
License: -


《安裝》

  • CDN

      <!-- jQuery v1.9.1 -->
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <!-- Timeline.js v0.0.1 -->
      <link href="https://night.myweb.hinet.net/cdn/timeline/0.0.1/dist/css/timeline.min.css" rel="stylesheet" />
      <script src="https://night.myweb.hinet.net/cdn/timeline/0.0.1/dist/js/timeline.min.js"></script>
    
  • npm

      $ npm install timelinejs-slider
    
  • Bower

      $ bower install timelinejs-slider
    

《範例》

  • 時間軸效果

      <div class="timeline-container">
      	<div class="example timeline">
      		<div data-time="2018"><!-- 內容 --></div>
      		<div data-time="2017"><!-- 內容 --></div>
      		...
      	</div>
      </div>
      <script>
      	$( ".example" ).Timeline();
      </script>
    

《延伸》

  1. Timeline.js - easily creates timeline slider
  2. ilkeryilmaz/timelinejs: jQuery timeline plugin, easily creates timeline slider.

上一篇
[十分鐘學習] KUTE.js - 做動畫金柑單
下一篇
[十分鐘學習] Muuri - 網站Layout大躍進
系列文
30天學習30套前端技術(2018年)61

1 則留言

0
Chris
iT邦新手 5 級 ‧ 2018-01-27 18:13:59

請問可以垂直使用嗎?

另外,回饋給你一個套件
前端 router

mfhsueh iT邦新手 4 級‧ 2018-01-28 21:25:33 檢舉

Hi, 謝謝分享,這路由插件對於沒有用大型框架的專案很有幫助。timeline.js如果要垂直使用,可以加入mode: "vertical"這個參數,參考範例: https://output.jsbin.com/sobuyofefi

我要留言

立即登入留言