SmohanTimeLine.js 酷炫的时间轴效果

展示地址

点此下载

原文出处

一、参数说明

item : '.item', //项目元素
top  : 30, //与下一行的间距
pointWidth : 22, //时间点宽度
cornerWidth : 22, //corner宽度
scroll : true  //点击时间点，是否滑动

二、CSS样式

/*时间轴样式*/
#TimeLine{100%;height:auto;min-height:600px;position:relative;padding:20px 0;margin-top:30px; font-size:14px;}
#TimeLine > .lines{2px; height:0; background:#c8c8c8; position:absolute; top:-30px;}
#TimeLine > .item{45%;height:auto; min-height:120px; background:#fff; position:absolute;}
#TimeLine > .item:hover{box-shadow:0 1px 10px rgba(0, 0, 0, 0.1); background-color:rgba(255,255,255,.9);}
#TimeLine > .item .point{display:block; 22px; height:22px; background:url(icons.png)-138px 0 no-repeat; z-index:9; position:absolute; cursor:pointer; }
#TimeLine > .item .point:hover{ background-position:-138px -22px;}
#TimeLine > .item .cornerL,#TimeLine > .item .cornerR{display:block; 22px; height:30px; background:url(icons.png) 0 -95px no-repeat; position:absolute;}
#TimeLine > .item .cornerL{ background-position:-22px -95px;}
#TimeLine > .item .cornerR{ background-position:0px -95px;}

三、HTML构建

<div id="TimeLine">
    <div class="lines">&nbsp;</div>
    ...
    <div class="item">
        <div class="item-wraper" style="padding:10px;">
               内容....任何HTML代码
        </div>
    </div>
        <div class="item">
        <div class="item-wraper" style="padding:10px;">
               内容....任何HTML代码
        </div>
    </div>
    ...
</div>

四、插件调用

 $(window).bind('resize',function(){
        $('#TimeLine').smohanTimeline({item:'.item'});
 }).resize();