[CSS]图片展示效果

本例对于完全支持:hover伪类的浏览器来说，只需要CSS即可，但是同以前做的一些效果一样，还是需要JS来应付史前怪兽IE 6。

关于这个js文件，请参阅：《JS解决IE 6不支持:hover伪类的简单方法》

 

 

首先看效果图：

图1 图片展示初始状态效果图

图2 图片展示:hover效果图

—-示例文件—-

 

HTML如下：

 

<div class="recomm"><ul><li class="hovereffect"> <a title="观赏该图片详细信息" href="http://www.ddcat.net/" mce_href="http://www.ddcat.net/"><imgtitle="这里是图片标题" src="img/show_1.jpg" alt="图片1" /></a><h5>By <a title="访问ddcat的个人空间" href="http://www.ddcat.net/" mce_href="http://www.ddcat.net/">ddcat</a> 2-12-09 Beijing</h5></li>……</ul></div><!--/.recomm-->

 

下面介绍几个要点：

1. 图片横排

1) 将li左浮动（float:left），可以使图片横排。
2) 利用li的负右边距（margin-right的负值），使后面的向左移动叠加在前面的li之上，如图3所示。

图3 利用负边距使图片叠加遮盖

 

.recomm li {float:left;margin-right:-179px;overflow:hidden;white-space:nowrap;text-align:center;}

 

 

当鼠标指向图片时（li:hover），设定li的右边距为0，则将后面的图片挤向右边。

 

.recomm li:hover, .recomm .lay-on {width:249px;margin-right:0;}

 

2. 边框

由图1可知，图片有1px的白色边框，但是需要注意的是，左右相邻的2个图片之间的边框只有1px，右边框是后面图片的左边框。因此实现的思路是：上/下/右边框用ul的边框来实现，而左边框由图片的边框实现。

 

.recomm ul {border:1px solid #fff;border-left:none;}.recomm li img {display:block;border-left:1px solid #fff;}

3. 尺寸的计算

负边距的计算如图4所示。

图4 负边距值的计算

此处最容易糊涂的地方是边框与宽度。

图片包括边框，如果设计的宽度为250px，那么图片的实际宽度应为248px（250px-2px）。（高度同理）
由于ul有1px的右边框，因此ul的CSS设定宽度为设计宽度-1px，本例中为599px（600px-1px）。

关于边框和宽度的关系请参见：《盒模型（BOX Model）》

 

.recomm ul {……height:168px;width:599px;}.recomm li img {……width:248px;height:168px;}

4. IE内的问题

在IE内，虽然对ul设定了overflow:hidden，但是会出现如图5所示的情况。因此，需要对ul设定position:absolute，以使其能正确隐藏溢出的内容。

图5 IE内无法正确处理 overflow:hidden

5. h5的显示与隐藏

h5内是图片的简要说明，默认状态不显示，当鼠标指向图片的时候会显示出来，如图2所示。

h5是叠加在图片上的，因此使用绝对定位来控制其位置，同时，为了使其相对于li绝对定位，因此给li设定相对定位以产生包含块。

 

.recomm li h5 {position:absolute;bottom:0;left:0;……}.recomm li:hover h5, .recomm .lay-on h5 {display:block;}

 

原文：http://www.ddcat.net/blog/?p=817