CSS Code

*{ margin: 0; padding: 0; } ul, ol { list-style: none outside none; } #container { width: 860px; margin: 0 auto; } .item { width: 408px; margin: 20px 10px 10px; float: left; background-color: #fff; border: 1px solid #b4bbcd; min-height: 50px; text-align: justify; word-wrap: break-word; } .inner { padding: 10px; } /*timeline navigatior css*/ .timeline_container { width: 16px; text-align: center; margin: 0 auto; cursor: pointer; display: block; } .timeline{ margin: 0 auto; background-color: #e08989; display: block; float: left; height: 100%; left: 428px; margin-top: 10px; position: absolute; width: 4px; } .timeline:hover{ cursor: pointer; margin: 0 auto; } .timeline div.plus{ width: 14px; height: 14px; position:relative; left: -6px; } /*arrow css style*/ .rightCorner { background-image: url("images/right.png"); display: block; height: 15px; margin-left: 408px; margin-top: 8px; padding: 0; vertical-align: top; width: 13px; z-index: 2; position: absolute; } .leftCorner { background-image:url("images/left.png"); display: block; height: 15px; width: 13px; margin-left: -13px; margin-top: 8px; position: absolute; z-index: 2; } /*deletebox style */ .deletebox { color: #CC0000; float: right; font-weight: bold; margin: 8px 10px; text-decoration: none; } /*popup*/ #popup { display: block; width: 408px; float: left; background-color: #fff; border: 1px solid #a9b6d2; min-height: 60px; display: none; position: absolute; margin: 10px; } #update { width: 100%; resize: none; min-height: 50px; } #update_button { background-color: #CC0000; border: 1px solid #333333; color: white; cursor: pointer; font-weight: bold; margin-top: 5px; padding: 5px; }

jQuery Code

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.masonry.js"></script> <script type="text/javascript"> $(function(){ //masonry plugin call $("#container").masonry({ itemSelector:".item", }); //timeline_container add mousemove event $(".timeline_container").mousemove(function(e){ var topdiv = $("#containertop").height(); var page = e.pageY - topdiv - 26; $(".plus").css({ "top": page + "px", "background":"url('images/plus.png')", "margin-left": "1px" }); }).mouseout(function(){ $(".plus").css({ "background":"url('')" }); }); //injecting arrow points function Arrow_Points(){ var s = $("#container").find(".item"); $.each(s,function(i,obj){ var posLeft = $(obj).css("left"); if(posLeft == "0px"){ html = "<span></span>"; $(obj).prepend(html); } else { html = "<span></span>"; $(obj).prepend(html); } }); } Arrow_Points(); //delete item box $(".deletebox").live("click",function(){ if(confirm("Are you sure?")){ $(this).parent().fadeOut("slow"); //remove item block $("#container").masonry("remove",$(this).parent()); //remove masonry plugin $("#container").masonry("reload"); //Hiding existing arrows $(".rightCorner").hide(); $(".leftCorner").hide(); //injecting fresh arrow Arrow_Points(); } return false; }); //Timeline navigator on click action $(".timeline_container").click(function(e){ var topdiv = $("#containertop").height(); //Current Postion $("#popup").css({ "top": (e.pageY - topdiv - 33) + "px" }); $("#popup").fadeIn();//Popup block show //textbox focus $("#update").focus(); }); //Mouseover no action $("#popup").mouseup(function(){ return false; }); //outside action of the popup block $(document).mouseup(function(){ $("#popup").hide(); }); //update button action $("#update_button").live("click",function(){ //textbox value var x = $("#update").val(); //ajax part $("#container").prepend('<div><a href="#">X</a>' + '<div>' + x + '</div></div>'); //reload masnory $("#container").masonry("reload"); //Hiding existing arrows $(".rightCorner").hide(); $(".leftCorner").hide(); //injecting fresh arrows Arrow_Points(); //clear popup text box value $("#update").val(""); //popup hide $("#popup").hide(); return false; }); }); </script>

类似“Facebook Timeline”的效果所需代码都在上面了，如果你想看看真实效果，你可以看看Srinivas Tamada写的一个DEMO效果。不过我建议大家还是动手一试好点，这样才能体会到。当然如果你不想自己动手，也可以点击这里进行下载。

那么有关于“Facebook Timeline”的介绍到这就算是全部完成了，希望大家能喜欢，如果您有更好的制作方法，记得与我分享。或者你对上面有任何问题可以直接在下面的评论中留言。

最后在结束此文时，让我们再一次感谢Srinivas Tamada给我们带来这么详细的教程——《Facebook Timeline Design using JQuery and CSS.》

如需转载烦请注明出处：W3CPLUS