SmohanTimeLine.js

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

前端交流群 JQUERY: 221716837 CSS3:335905622

原创作品,版权归Smohan所有,使用请保留出处.

作品信息
var information = {
    fileName   : "smohan_timeline",
    version    : "3.2.0",
    author     : "Smohan",
    createTime : "2015-03-31 12:32",
    updateTime : "2015-11-11 02:06"
};
版本记录
  1. 2015-11-113.2.0[最新版本]使用原生JavaScript重新编写,不在依赖jQuery
  2. 2015-03-313.0.1增加了对移动端和ajax方法调用的支持,新增minTop和minScreen两个参数作为移动端配置以及开放render方法作为高度改变后的重新渲染

自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方法作为高度改变后的重新渲染,具体请参考下列参数:

参数
参数名 类型 默认值 可选值 说明
item String .item 列表容器
margin Number 100 左右列表间的间距
top Number 20 上下列表间的间距
minTop String 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

在页面中引入smohanTimeLine.js,在window.onload中执行

<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或者在评论中说明.

 
发布观点
加载更多...
即将启用新域名 smohan.im  smohan.net将作为静态存储域名使用,请关注smohan.im动态