当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 实现超酷的日期排列的2种方法

Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
用ADODB.Stream转换
html读出文本文件内容
自适应高度框架 ----属个人收藏内容
Maps Javascript
JAVASCRIPT HashTable
一页面多XMLHttpRequest对象
网页javascript精华代码集
判断浏览器的js代码
JS判断浏览器之Navigator对象
用js自动判断浏览器分辨率的代码
用JavaScript和注册表脚本实现右键收藏Web页选中文本
判断页面是关闭还是刷新的js代码
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
叠加计算出错的解决方法
一个轻量级的XHTML右键菜单[支持IE和firefox]
一些易混淆且不常用的属性，希望有用
网易首页的新闻代码
Flash对联广告的关闭按钮讨论
用JS获得表格当前行数的代码

No. « 45 46 47 48 »

技术文章搜索

关键字

Javascript 中的 实现超酷的日期排列的2种方法

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-28   浏览: 323 ::
收藏到网摘: n/a

LearningjQuery.com博客帖子列表的左边有一个很酷的日期，如图：

从图中我们看到，“2009”垂直排列在右侧。用Firebug查看元素，文本“2009”出现在html结构之中，本文介绍实现这种效果的两种方法。

一、利用Sprite技术来实现

其实现过程已有Chris Coyier 在《Date Display Technique with Sprites》一文中作了详细介绍，这里把其实现过程作一个简单的描述。很显然，我们不希望每一个日期用一张单独的图片，因此，将其整合到一张图片之上，安排年、月、日在图片的不同区域，如图：

1、Html

页面中html结构如下：

1.<div class="postdate">
2.        <div class="month m-06">Jun</div>
3.        <div class="day d-30">30</div>
4.        <div class="year y-2009">2009</div>
5.</div>

.postdate容器包含三个区域，分别对应年月日，这样很好的保证了语义上的完整性。
在类似wordpress这样的CMS系统中，其后端代码是这样的：

1.<div class="postdate">
2.        <div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
3.        <div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
4.        <div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
5.</div>

2、Css

css是sprite真正发挥作用的地方，利用html中的定义的class属性，让对应的图片得以显示。

首先，让class属性为.postdate的容器相对定位，这样包含其中的三个区域就会绝对定位，并使用同一张背景图片。设置各自的宽度和高度，并将文字移出以显示背景图片。

然后，定义每个月（12）、每天（31）、每年（按10年计）具体的背景位置，以显示与其相对应的图片。

01..postdate {
02.  position: relative;
03.  width: 50px;
04.  height: 50px;
05.  float: left;
06.}
07..month, .day, .year {
08.  position: absolute;
09.  text-indent: -1000em;
10.  background-image: url(/wp-content/themes/ljq/images/dates.png);
11.  background-repeat: no-repeat;
12.}
13..month { top: 2px; left: 0; width: 32px; height: 24px;}
14..day { top: 25px; left: 0; width: 32px; height: 25px;}
15..year { bottom: 0; right: 0; width: 17px; height: 48px;} 
16.  
17..m-01 { background-position: 0 4px;}
18..m-02 { background-position: 0 -28px;}
19..m-03 { background-position: 0 -57px;}
20..m-04......
21.  
22..d-01 { background-position: -50px 0;}
23..d-02 { background-position: -50px -31px;}
24..d-03 { background-position: -50px -62px;}
25..d-04 ...... 
26.  
27..y-2006 { background-position: -150px 0;}
28..y-2007 { background-position: -150px -50px;}
29..y-2008 { background-position: -150px -100px;}
30..y-2009 ......

二、利用Text Rotation来实现

Jonathan Snook 在他的文章《Text Rotation with CSS》中提到用Text Rotation来实现这种效果。这里对其作简要的描述。

如今，很多主流的浏览器如Webkit和Firefox(从3.5开始)都支持旋转HTML元素。那么要使其垂直排列，就可以利用该属性。但须为每种浏览器加上前缀。

1.-webkit-transform: rotate(-90deg);
2.-moz-transform: rotate(-90deg);

对于IE浏览器，可以使用一个称之为BasicImage 的滤镜来达到目的，该滤镜能够旋转任何具有layout属性的元素。但字体较之于使用图片来说，并不显得平滑。

1.filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

该滤镜可以接受四个属性值0、1、2、3，其对应旋转的角度分别为0、90、180、270。尽管它还具有mirroring、masking、greyscale 等属性，但在此对我毫无意义。

在Jonathan Snook的这篇文章的留言中，Ashish 提到在IE中使用css的一个属性writing-mode:tb-rl可以得到同样的效果，本人做过测试，的确可以使文本垂直排列。但与旋转文本略有不同，主要体现在文字起始的方向上。另外，本人在IEtest中测试IE8，使用BasicImage好像不能生效。

三、总结

对比两种方法。很明显，第一种方法无论是浏览器支持上还是视觉效果的美观上都强于第二种，唯一感到不足的是css代码较长。第二种方法虽不甚完美，但其实现过程并不复杂，不需要任何图片，但作为一种开拓思路的尝试也未尝不可。

相关阅读

  • Date Display Technique with Sprites
  • Text Rotation with CSS
  • Date Badges and Comment Bubbles for Your Blog