Skip to content
时间轴
CSS JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
scripts
styles
.gitignore
README.md
index.html

README.md

timeline

时间展示轴

点击查看 demo


注意事项:

  • 发现bug或技术上的交流请发邮件到:xyzsyx@163.com
  • 本插件依赖jQuery库
  • 本demo为本人早起所写,可能写法不适用于现在的框架页面,这里只是提供思路和效果
  • 本插件根据 dom 结构自动初始化插件,未通过解析 json 数据的方式

使用方法:

  1. 导入样式表
    <link rel="stylesheet" type="text/css" href="./styles/index.css"></link>
  1. 导入jquery库文件和autoTime.js
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="./scripts/index.js"></script>
  1. DOM
    <div id="timeline" class="timeline">
        <ul class="timeline-con">
            <li class="year">
              <span class="shape shape-white"></span>
              <span class="text">2013年</span>
              <span class="shape"></span>
            </li>
            <li class="day">
              <span class="thing">第十七届中国国际光电产业博览会</span>
              <span class="text">4-6</span>
            </li>
        </ul>
    </div>
  1. 调用 / 初始化
	new timeline()

You can’t perform that action at this time.