不知道大家有没有经常观注Facebook，不过我是经常观注他，时时了解他的Web页面的设计与变化，因为我很喜欢他的风格。最近看到Facebook的一个比较明显的变化——Facebook Timeline。
这一变化把我吸引了，仔细看了他们的源代码，但不懂js的我来说，实现风格并不难，但是要实现功能还是相当的困难。没办法的情况之下只好借助GG在网上搜索“Facebook Timeline design”。终于找到一篇Srinivas Tamada写的《Facebook Timeline Design using JQuery and CSS.》教程。于是马上自己跟着动手写了一个，觉得很有意思，并不是想像中的那么难，稍加整理一翻，贴上来与大家一起分享。
从上图中可以看到“Facebook Timeline”效果是一个以时间为主线，主线左右两边有很多个block，并且在主线上点击会弹出一个文本输入，让你添加内容，从而显示到页面上。请看下面的示意思图：
大概了解了“Facebook Timeline”是什么东东后，我们就一起跟着Srinivas Tamada写的《Facebook Timeline Design using JQuery and CSS.》教程一起来学习如何制作自己的“timeline”效果。
需要的资源
制作这个效果我们首先需要准备两样东西，第一个是jQuery的版本库，另外一个就是制作瀑布流效果的插件jQuery Masonry plugin。有了这两样东东后，就可以进入后面的制作。
HTML Markup
第一步先创建一个容器div,这里把称为“div#container”，同时这个容器是可以放置多个div元素，并且此处给其一个类名“item”，另外在每个“div.item”放置一个“div.inner”:
<div id="container"> <div class="item"> <div class="inner">Block Content</div> </div> [...] <div class="item"> <div class="inner">Block Content</div> </div> </div>
注：这只是最初步的HTML结构，随着后面的内容介绍，我们所需的结构会有一定的变化。请仔细留意。
先给这个Markup一个基本样式：
*{
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;
}
经过上面的样式设置后，Block进行float后，如下图所示的效果：
很显然，上面的效果并不是我们期待的效果，块与块之间的距离太大了，那么我们需要怎样来处理呢？想要答案吗？请看第二步。
第二步：消除块与块之间的距离
前面一步，我们有一个很不理想的效果，就是块与块之间的距离太大了，那么这一步，我们就来看是如何让块与块之间的效果都是一致的。答案很简单，使用jquery和Masonry插件实现。这也就是前面为什么说需要准备jQuery的版本库和jQuery Masonry plugin的原因(有关于jQuery Masonry plugin的详细介绍请点击这里)。下面别的不多说，请看如何调用：
调用库和插件
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.masonry.js"></script>
启用Masonry插件
<script type="text/javascript" >
$(function(){
// masonry plugin call
$('#container').masonry({itemSelector : '.item',});
});
</script>
下面一起来看看运用了jQuery Masonry plugin后的效果：
第三步：制作timeline导航
上面完成了区块的效果设置，接下来这一步主要是制作Timeline导航的效果，在这里在“div#container”容器中添加一些需要使用的HTML标签用来制作“timeline”导航：
HTML Markup
<div id="container"> <!-- TimeLine导航 --> <div class="timeline_container"> <div class="timeline"> <div class="plus"></div> </div> </div> <div class="item"> <div class="inner">Block Content</div> </div> [...] <div class="item"> <div class="inner">Block Content</div> </div> </div>
结构添加完成后，我们需要对其样式进行设置
CSS Code
/*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;
}
接下来使用jQuery来改为“div.plus”的背景图片：
jQuery Code
//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('')"
});
});
完成后的效果就变成下图所示的风格：
第四步：给item块加上箭头效果
这一步主要实现的效果是，给每个“div.item”的块加上箭头效果，如果“div.item”的在左边加上“向右箭头”，反之加上“向左箭头”。
jQuery Code
//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 class='rightCorner'></span>";
$(obj).prepend(html);
} else {
html = "<span class='leftCorner'></span>";
$(obj).prepend(html);
}
});
}
Arrow_Points();
接下来给这两个箭头写上相应的样式效果：
CSS Code
/*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;
}
完成后的效果
第五步：给item块增加删除按钮
这一步，给每个“div.item”添加一个“删除”按钮，当你点击这个“删除”按钮时，被点击块将隐藏，而整个布局重新更样布局。
HTML Markup
<div id="container"> <!-- TimeLine导航 --> <div class="timeline_container"> <div class="timeline"> <div class="plus"></div> </div> </div> <div class="item"> <a href='#' class='deletebox'>X</a> <div class="inner">Block Content</div> </div> [...] <div class="item"> <a href='#' class='deletebox'>X</a> <div class="inner">Block Content</div> </div> </div>
CSS Code
/*deletebox style */
.deletebox {
color: #CC0000;
float: right;
font-weight: bold;
margin: 8px 10px;
text-decoration: none;
}
下面的jQuery代码给“.deletebox”按钮一个“click”事件，当你点击这个按钮时，主要完成以下事情：当前“item”块移除掉，并且剩下的块重新通过“Masonry”进行排列，具体看代码：
jQuery Code
//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;
});
第六步：弹出窗的制作
最后一步，需要制作一个弹出窗效果，制作这个效果，需要先给他加上一些HTML标签。
HTML Markup
<div id="container"> <!-- TimeLine导航 --> <div class="timeline_container"> <div class="timeline"> <div class="plus"></div> </div> </div> <div class="item"> <a href='#' class='deletebox'>X</a> <div class="inner">Block Content</div> </div> [...] <div class="item"> <a href='#' class='deletebox'>X</a> <div class="inner">Block Content</div> </div> <div id="popup" class="shade"> <div class="Popup_rightCorner"></div> <div class="inner"> <h3>What's Up?</h3> <div class="clearfix"><textarea name="" id="update"></textarea></div> <div class="clearfix"><input type="submit" id="update_button" value="Update"/></div> </div> </div> </div>
修改完成后，给“弹出窗”写个简单的样式：
CSS Code
/*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
//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 class="item"><a href="#" class="deletebox">X</a>' + '<div class="inner">' + 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;
});
最终效果就如下面的草图所示：
完成第六步后，类似于Facebook Timeline的效果就算是做出来了，最后我把相关代码列出来：
HTML Markup
<div id="container"> <!-- TimeLine导航 --> <div class="timeline_container"> <div class="timeline"> <div class="plus"></div> </div> </div> <div class="item"> <a href='#' class='deletebox'>X</a> <div class="inner">Block Content</div> </div> [...] <div class="item"> <a href='#' class='deletebox'>X</a> <div class="inner">Block Content</div> </div> <div id="popup" class="shade"> <div class="Popup_rightCorner"></div> <div class="inner"> <h3>What's Up?</h3> <div class="clearfix"><textarea name="" id="update"></textarea></div> <div class="clearfix"><input type="submit" id="update_button" value="Update"/></div> </div> </div> </div>
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 class='rightCorner'></span>";
$(obj).prepend(html);
} else {
html = "<span class='leftCorner'></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 class="item"><a href="#" class="deletebox">X</a>' + '<div class="inner">' + 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
