html部分
< div class=“datagrid-mac-ower”>
< ul class=“time-vertical” id=“ower-result”>
< /ul>
< /div>
css部分:
.datagrid-mac-ower {
width: 300px;
height: 480px;
margin-left: 20px;
overflow-y: scroll;
}
.time-vertical {
list-style-type: none;
border-left: 2px solid #000;
margin-left: 10px;
padding: 0px;
}
.datagrid-btable{
width:320px;
}
.time-vertical li {
height: 80px;
position: relative;
width: 240px;
}
.time-vertical li a {
display: inline-block;
margin-left: 20px;
margin-top: 15px;
text-decoration: none;
color: #000;
height: 60px;
background: #fff;
width: 240px;
}
.time-vertical li b:before {
content: '';
position: absolute;
top: 18px;
left: -10px;
width: 12px;
height: 12px;
border: 2px solid red;
border-radius: 10px;
background: red;
}
.time-vertical li span {
position: absolute;
color: #fff;
top: 18px;
left: -6px;
}
.time-vertical li div {
text-align:left;
font-size:13px;
top: 18px;
margin-left: 10px;
}
js部分动态添加时间轴:
查询初始处调用该方法即可
function addTimeOwer(data) {
var content = ‘’;
var b = 0;
for (var i = 0; i < 8; i++) {
b = i+1;
content = ‘< li>< b>< /b>< span>’ + b +’< /span>< a href=“javascript:void(0)”>< div>2016-09-01 00:23:34< /div>< div>沣惠南路华晶广场< /div>< div>【IMSI】534746788953893< /div> < /a>< /li >’;
$("#ower-result").append(content);
}
}