原创作品,版权归Smohan所有,使用请保留出处.
SmohanTimeLine是一款基于原生JavaScript的支持移动端的时间轴插件,大小仅仅4KB。需要简单的配置,就可以完成你的时间轴,记录流转的时光。

特别说明

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

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

参数:

参数名 类型 默认值 可选值 说明
item String .item 列表容器
margin Number 100 左右列表间的间距
top Number 20 上下列表间的间距
minTop Number 10 移动端上下间距
resize Boolean true false 监听屏幕变化
minScreen Number 640 当屏幕尺寸达到该值时,切换到单列显示,如移动端,需设置resize = true

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>
如在使用中有任何问题,请参考demo或者在评论中说明..

-- EOF --

本文标题:timeline - 记录时光
本文链接https://smohan.net/blog/timeline
最后修改:2018 年 11 月 13 日 07 : 04 PM
如果觉得我的文章对你有用,请随意赞赏