特别说明

自2.0版（查看）发布以来，收到大家不同方向的反馈，感谢大家的支持。首先，再次强调一下，SmohanTimeLine.js，包括2.0版都是支持IE8及其以下IE浏览器的，因为demo中使用的Jquery库是2.1版，而Jquery从1.9开始就不再对IE6-8做支持了，所以有网友反馈说不支持IE6-8，其实，只要在你的项目中将Jquery文件降级到1.8及其以下版本，并且稍微改以下css就好了。新版本3.2.0已完成，采用原生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

本站使用「 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 」创作共享协议，转载或使用请署名并注明出处。 相关说明 »