jQuery制作Facebook Timeline

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

不知道大家有没有经常观注Facebook,不过我是经常观注他,时时了解他的Web页面的设计与变化,因为我很喜欢他的风格。最近看到Facebook的一个比较明显的变化——Facebook Timeline

Facebook Timeline design

这一变化把我吸引了,仔细看了他们的源代码,但不懂js的我来说,实现风格并不难,但是要实现功能还是相当的困难。没办法的情况之下只好借助GG在网上搜索“Facebook Timeline design”。终于找到一篇Srinivas Tamada写的《Facebook Timeline Design using JQuery and CSS.》教程。于是马上自己跟着动手写了一个,觉得很有意思,并不是想像中的那么难,稍加整理一翻,贴上来与大家一起分享。

从上图中可以看到“Facebook Timeline”效果是一个以时间为主线,主线左右两边有很多个block,并且在主线上点击会弹出一个文本输入,让你添加内容,从而显示到页面上。请看下面的示意思图:

facebook timeline design

大概了解了“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后,如下图所示的效果:

facebook timeline design

很显然,上面的效果并不是我们期待的效果,块与块之间的距离太大了,那么我们需要怎样来处理呢?想要答案吗?请看第二步。

第二步:消除块与块之间的距离

前面一步,我们有一个很不理想的效果,就是块与块之间的距离太大了,那么这一步,我们就来看是如何让块与块之间的效果都是一致的。答案很简单,使用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后的效果:

facebook timeline design

第三步:制作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('')"
			    });
			});			
	

完成后的效果就变成下图所示的风格:

facebook timeline design

第四步:给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;
		}
	

完成后的效果

facebook timeline design

第五步:给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 design

完成第六步后,类似于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

Air Force 1 High

如需转载,烦请注明出处:https://www.w3cplus.com/jquery/facebook-timeline-design-using-jquery

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部