<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery实现超酷的时间轴用户留言信息展现特效</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="timeline_container">
<div class="timeline">
<div class="plus"></div>
<div class="plus2"></div>
</div>
</div>
<!-- <div class="item">
<h3><span class="fl">柳州一通网1</span><span class="fr">IP：221.7.207*** 2013-02-21 08:46:29</span></h3>
<p class="con">帮我做的网站很好，很满意<br />支持一下下。。。</p>
<h4><b>Reply：</b>管理员尚未回复</h4>
</div>
<div class="item">
<h3><span class="fl">柳州2</span><span class="fr">IP：221.7.207*** 2013-02-21 08:39:32</span></h3>
<p class="con">很有创意</p>
<h4><b>Reply：</b>管理员尚未回复</h4>
</div>
<div class="item">
<h3><span class="fl">伪装的心3</span><span class="fr">IP：218.56.32*** 2013-02-21 08:07:48</span></h3>
<p class="con">很不错的页面啊<br />支持一下下。。。</p>
<h4><b>Reply：</b>管理员尚未回复</h4>
</div>
<div class="item">
<h3><span class="fl">千里4</span><span class="fr">IP：111.11.189.*** 2013-02-20 23:52:25</span></h3>
<p class="con">给你留言</p>
<h4><b>Reply：</b>管理员尚未回复</h4>
</div>
<div class="item">
<h3><span class="fl">漫画之迷5</span> <span class="fr">IP：119.137.61.*** 2013-02-20 23:00:25</span></h3>
<p class="con">网站真不错啊，漫画情不自禁地在此留了个言，哈哈。。。</p>
<h4><b>Reply：</b>管理员尚未回复</h4>
</div>
<div class="item">
<h3><span class="fl">水墨寒6</span> <span class="fr">IP：27.224.56*** 2013-02-20 22:42:43</span></h3>
<p class="con">自己先把沙发坐了！水墨寒个人官网（<a href="http://www.xwcms.net/" target="_blank">http://www.xwcms.net/</a>）正式开通！欢迎大家留意</p>
<h4><b>Reply：</b>管理员尚未回复</h4>
</div> -->
</div>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/smohan.blog.plug.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*$('#container').masonry({itemSelector : '.item'});
function Arrow_Points(){
var s = $("#container").find(".item");
$.each(s,function(i,obj){
var posLeft = $(obj).css("left");
if(posLeft == "0px"){
html = "<span class='rightcorner'></span>";
$(obj).prepend(html);
} else {
html = "<span class='leftcorner'></span>";
$(obj).prepend(html);
}
});
}
Arrow_Points();
/*$("#container").find(".item").each(function(index,item){
var html = "";
if(index%2 == 0){
console.log("偶数"+index);
html = "<span class='rightcorner'></span>";
$(item).prepend(html);
}else{
console.log("奇数"+index);
html = "<span class='leftcorner'></span>";
$(item).prepend(html);
}
})*/
//1、编写的测试组装
/*var table ='';
for(var i=0;i<8;i++){ //这个地方遍历循环的就是你的数据列表
table+= '<div class="item">';
if(i%2 == 0){ //这个地方就可以用你的用户类型判断 这个添加在那一边
table+= '<span class="rightcorner"></span>';
}else{
table+= '<span class="leftcorner"></span>';
}
table+= '<h3><span class="fl">柳州一通网'+i+'</span><span class="fr">IP：221.7.207*** 2013-02-21 08:46:29</span></h3>';
table+= '<p class="con">帮我做的网站很好，很满意<br />支持一下下。。。</p>';
table+= '<h4><b>Reply：</b>管理员尚未回复</h4>';
table+= '</div>';
}
$("#container").append(table);*/
//2、实际的数据组装
//数据列表
var dataList = [
{OperatorName:'孙小超',time:'2020-11-03 09:05:15',value:'新建(编辑)申请'},
{OperatorName:'管理员',time:'2020-11-03 09:06:16',value:'初审'},
{OperatorName:'管理员',time:'2020-11-03 09:07:15',value:'审核'},
{OperatorName:'管理员',time:'2020-11-03 09:08:15',value:'审核不通过'},
{OperatorName:'孙小超',time:'2020-11-03 09:09:15',value:'再次申请'}
];
var table ='';
for(var i=0;i<dataList.length;i++){
table+= '<div class="item">';
if(i%2 == 0){
table+= '<span class="rightcorner"></span>';
}else{
table+= '<span class="leftcorner"></span>';
}
table+= '<h3><span class="fl">'+dataList[i].value+'</span><span class="fr">'+dataList[i].time+'</span></h3>';
table+= '<p class="con">'+dataList[i].OperatorName+' '+dataList[i].value+'</p>';
table+= '</div>';
}
$("#container").append(table);
});
</script>
</body>
</html>
demo下载地址