SmohanTimeLine是一款基于原生JavaScript的支持移动端的时间轴插件，大小仅仅4KB。需要简单的配置，就可以完成你的时间轴，记录流转的时光。

特别说明

采用原生JavaScript编写，不在依赖jQuery插件，减轻移动端负担。

3.0.1版主要增加了对移动端和ajax方法调用的支持，新增minTop和minScreen两个参数作为移动端配置以及开放render方法作为高度改变后的重新渲染，具体请参考下列

参数：

CSS

部分样式涉及到CSS3，请直接修改为图片，图片不再提供

    .container{
       position:relative;
       width:86%;
       max-width:1280px;
       min-width:480px;
       overflow:hidden;
    }
    #timeline{
        position: relative;
        min-height: 660px;
        margin-top: 20px;
    }
    #timeline .line{  //3.2.0 不再使用.lines 类， 改为.line
        width: 2px;
        height: 0;
        background-color: #c8c8c8;
        position: absolute;
        top: -20px;
    }
    #timeline .item{
        background-color: #fff;
        overflow: hidden;
        position: absolute;
        min-height: 80px;
        clear: both;
        visibility: hidden; //为避免记载过程中跳动，hidden  item
    }
    #timeline .item .content{
        padding:10px;
        overflow:hidden;
    }
    #timeline .item .point,#timeline .item .corner{
        display: block;
        position: absolute;
        z-index: 2;
    }
    #timeline .item .point{
       /*此处涉及CSS3，如需兼容IE6-8，请修改为图片，中间小圆点*/
        width: 16px;
        height: 16px;
        border-radius: 100%;
        background-color: #fff;
    }
    #timeline .item .point:before{
       /*此处涉及CSS3，如需兼容IE6-8，可忽略，点上的那个绿点，可直接做图片到 point上*/
        display: block;
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background-color: #70ca10;
        position: absolute;
        top: 3px;
        left: 3px;
    }
    #timeline .item.isLeft .corner{
        top : 27px;
    }
    #timeline .item.isLeft .point{
        top : 30px;
    }
    #timeline .item.isRight .corner{
        top : 37px;
    }
    #timeline .item.isRight .point{
        top : 40px;
    }
    #timeline .item .corner{
        /*此处涉及CSS3，如需兼容IE6-8，请修改为图片，箭头*/
        border: 12px solid transparent;
    }
    #timeline .item.isLeft .corner{
        border-left-color: #fff;
        left: 100%;
    }
    #timeline .item.isRight .corner{
        border-right-color: #fff;
        right: 100%;
    }

HTML结构

    <div class="container">
        <div id="timeline">
            <!--循环开始-->
            <div class="item">
                <div class="content">
                    内容....任何HTML代码
                </div>
            </div>
            <!--循环结束-->
        </div>
    </div>

JAVASCRIPT

    <script>
    var myTimeLine;
    window.onload = function(){
        myTimeLine = timeLine('#timeline',{
          item   : '.item',
              margin : 120, //左右之间的间距
              top    : 20 ,  //距离上一个item的间距
              minTop : 10,  //如在手机下显示，可以将上下间距适当缩小
              resize : true, //监听窗口变化
              minScreen : 640 //当窗口小于640时，单列显示
        });
    }
    //如容器高度变动，比如ajax加载后，可执行render方法刷新容器
    myTimeLine.render(); 
    </script>

-- EOF --

本文标题：timeline - 记录时光
本文链接：https://smohan.net/blog/timeline