Last active
March 25, 2018 16:21
-
-
Save amelieykw/2d4190c7e6da69e0275e5578da16bfa6 to your computer and use it in GitHub Desktop.
[timeline.js] #jquery #css #js #timeline.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .section-list-box:not(:last-child) { | |
| border-bottom: 1px solid #dddddd; | |
| margin: 3rem 0; | |
| padding-bottom: 5rem; } | |
| .timeline-theme-2 { | |
| width: 600px; | |
| margin: 70px auto auto; } | |
| .timeline-small-box .timeline-list { | |
| width: 600px; | |
| height: 250px; } | |
| .theme-1 { | |
| background: #4A2AB2; } | |
| .theme-2 { | |
| background: #7dffc3; } | |
| .theme-3 { | |
| background: #23A5E9; } | |
| .theme-4 { | |
| background: #93C763; } | |
| .theme-5 { | |
| background: #949923; } | |
| .theme-6 { | |
| background: #990055; } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <title>Timeline.js - easily creates timeline slider</title> | |
| <!-- Timeline Style --> | |
| <link rel="stylesheet" href="../src/css/timeline.css"> | |
| <link rel="stylesheet" href="css/prettify.css"> | |
| <!-- Demo style --> | |
| <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> | |
| <link rel="stylesheet" href="css/demo.css"> | |
| <meta name="description" content="jQuery timeline plugin, easily creates a timeline." /> | |
| <meta name="keywords" content="timelinejs, timeline, timeline slider, milestone, topic:chronology, jquery timeline plugin" /> | |
| </head> | |
| <!-- 省去N行 --> | |
| <div class="section-list-box"> | |
| <h3>Dots Position and Custom Item Class Example:</h3> | |
| <pre class="prettyprint lang-js"> | |
| $('.timeline-2').Timeline({ | |
| itemClass: 'box-item', | |
| dotsPosition: 'top', | |
| startItem: 'last' | |
| }); | |
| </pre> | |
| <div class="timeline-container timeline-theme-2"> | |
| <div class="timeline timeline-small-box timeline-2"> | |
| <div class="theme-1" data-time="1">1</div> | |
| <div class="theme-2" data-time="2">2</div> | |
| <div class="theme-3" data-time="3">3</div> | |
| <div class="theme-4" data-time="4">4</div> | |
| <div class="theme-5" data-time="5">5</div> | |
| <div class="theme-1" data-time="6">6</div> | |
| <div class="theme-3" data-time="7">7</div> | |
| <div class="theme-4" data-time="8">8</div> | |
| <div class="theme-6" data-time="9">9</div> | |
| <div class="theme-5" data-time="10">10</div> | |
| </div> | |
| </div> | |
| <!-- /.timeline-container --> | |
| </div> | |
| <!-- /.section-list-box --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; | |
| /*! | |
| Timeline - v0.0.1 | |
| ilker Yılmaz | |
| https://github.com/ilkeryilmaz/timeline | |
| */ | |
| .timeline-container { | |
| position: relative; } | |
| .timeline-container::after { | |
| content: ''; | |
| display: table; | |
| clear: both; } | |
| .timeline { | |
| width: 100%; } | |
| .timeline-list { | |
| position: relative; | |
| width: 100%; | |
| overflow: hidden; | |
| margin: 0; | |
| padding: 0; } | |
| .timeline-list-wrap { | |
| position: relative; | |
| top: 0; | |
| left: 0; | |
| display: block; | |
| transform: translate3d(0, 0, 0); | |
| transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955); } | |
| .timeline-item { | |
| float: left; | |
| width: 800px; | |
| height: 400px; | |
| border: 1px solid #ddd; | |
| box-sizing: border-box; } | |
| .timeline-dots-wrap { | |
| position: absolute; | |
| overflow: hidden; } | |
| .timeline-horizontal .timeline-dots-wrap { | |
| width: 100%; | |
| height: 35px; } | |
| .timeline-vertical .timeline-dots-wrap { | |
| width: 65px; | |
| height: 100%; | |
| top: 0; } | |
| .timeline-dots-wrap.bottom { | |
| bottom: -50px; } | |
| .timeline-dots-wrap.top { | |
| top: -50px; } | |
| .timeline-dots-wrap.left { | |
| left: -65px; } | |
| .timeline-dots-wrap.right { | |
| right: -70px; } | |
| .timeline-dots { | |
| margin: 0; | |
| padding: 0; | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955); } | |
| .timeline-horizontal .timeline-dots { | |
| background: url("../img/timeline-bg.png") bottom repeat-x; } | |
| .timeline-vertical .timeline-dots { | |
| background: url("../img/timeline-vertical-bg.png") left repeat-y; } | |
| .timeline-dots li { | |
| transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955); | |
| list-style: none; | |
| overflow: hidden; } | |
| .timeline-horizontal .timeline-dots li { | |
| float: left; | |
| width: 50px; | |
| text-align: center; } | |
| .timeline-vertical .timeline-dots li { | |
| width: 100%; } | |
| .timeline-dots li.slide-active button { | |
| color: #2972ca; | |
| font-size: 15px; } | |
| .timeline-dots button { | |
| cursor: pointer; | |
| border: none; | |
| outline: none; | |
| color: #333; | |
| font-size: 12px; | |
| transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955); } | |
| .timeline-horizontal .timeline-dots button { | |
| background: url("../img/date-icon.png") bottom no-repeat; | |
| padding-bottom: 15px; } | |
| .timeline-vertical .timeline-dots button { | |
| background: url("../img/date-icon-vertical.png") left no-repeat; | |
| padding-left: 15px; } | |
| .timeline-container { | |
| width: 800px; | |
| margin: 0 auto; } | |
| .timeline-list { | |
| width: 800px; } | |
| .timeline-item { | |
| width: 800px; | |
| height: 400px; | |
| padding: 10px; | |
| border: 1px solid #ddd; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment