SmohanTimeLine.js 酷炫的时间轴效果
浏览数：53 /
时间：2015年06月09日
一、参数说明
item : ‘.item‘, //项目元素
top : 30, //与下一行的间距
pointWidth : 22, //时间点宽度
cornerWidth : 22, //corner宽度
scroll : true //点击时间点，是否滑动
二、CSS样式
/*时间轴样式*/
#TimeLine{width:100%;height:auto;min-height:600px;position:relative;padding:20px 0;margin-top:30px; font-size:14px;}
#TimeLine > .lines{width:2px; height:0; background:#c8c8c8; position:absolute; top:-30px;}
#TimeLine > .item{width: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; width: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; width: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"> </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();
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
