首页 > 代码库 > SmohanTimeLine.js 酷炫的时间轴效果
SmohanTimeLine.js 酷炫的时间轴效果
展示地址
点此下载
原文出处
一、参数说明
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();
SmohanTimeLine.js 酷炫的时间轴效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。