WORKS作品

• 发布日期纵向效果代码

  2008-05-08

  版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
  http://shipin.blogbus.com/logs/20482650.html
  
  

  对于脚本代码，我认为外部调用的才是可取的，我不能容忍它出现在body中，因为如果访问者的浏览器不支持脚本，则会使页面面目全飞。大家是否有注意到，我之前介绍的所有“效果代码”方面的文章都是符合外部调用的，也就是说页面不会因为浏览器不支持脚本语言而被破坏。

  今天要介绍的发布日期纵向效果代码也是很成功的做到了这一点。它作用于jquery框架，通过对date标签的调用来改变日期的表现方式。先来看下范例：发布日期纵向效果代码。范例的表现手法很简单，仅仅把年月日的位置调了一下，对css了解的朋友可以自己对它美化。

  截图：
  

  其实这个代码就是针对大巴写的，很简单。
  1.进入后台“模板设置”页面，自定义模板下的head代码块中粘贴下面代码：

  <script type="text/javascript" src="http://shipin.blogbus.com/files/12068183620.js">
  </script>
  <script type="text/javascript">
  function showdate(){
  	$(".date").each(function(i){
  		var d = isdate($(this).text());
  		$(this).html(d);
  	});
  	return false;
  }
  function isdate(i) {
  	i = colldate(i);
  	if(i.length>0) {
  		var c = i.split("-");
  		c = '<h1>' + c[2] + '<span>' + c[1] + '-' + c[0] + '</span></h1>';
  		return c;
  	}
  }
  function colldate(s, ss) {
  	ss = ss || "\\s";
  	return s.replace(new RegExp("^[" + ss + "]+", "g"), "");
  }
  </script>
  <script type="text/javascript">
  $(document).ready(function(){
  	showdate();
  });
  </script>
  

  2.分别进入index-posts和detail-post代码块中检查包裹{#date}标签的代码是否含有class="date"属性值，也就是说，如果你的代码是<h3>{#date}</h3>就改成<h3 class="date">{#date}</h3>，如果是<span class="date">{#date}</span>就不用改，这一点很重要；

  3.在css代码块中粘贴下面代码：

  #posts .date {
  	float: left;
  	margin: 0 10px 10px 0;
  	border-right: 5px solid #ab1;
  	text-align: center;
  }
  #posts .date h1 {
  	margin: 5px auto;
  	font-size: 30px;
  	color: #fff;
  }
  #posts .date h1 span {
  	float: left;
  	margin: 10px;
  	font-size: 11px;
  	color: #ab1;
  }
  

  这个仅仅是参考，如果对css熟悉的朋友根据自己的博客特点自己修改。

  上面三步完成后保存就可以看到效果了，在这里补充一句，因为它使用了浮动属性，所以有必要对日志进行清除浮动处理，做法是把<div class="postBody">改成<div class="postBody clear">，然后在css里面加上.clear {clear:both;}

  这个代码使用就介绍到这里，有什么问题就在下面留言吧。

  
  

  随机文章：

  规定时间内显示*隐藏浮动层效果代码 2008-06-29

  超链接按类型加样式效果代码 2008-06-22

  鼠标点击(click)选项卡(TAB)效果代码 2008-06-15

  鼠标滑过(hover)选项卡(TAB)效果代码 2008-06-15

  评论双样式效果代码 2008-05-03

  
  收藏到：Del.icio.us

  
  
  
  
  

  Tags: Javascript CSS

  引用: