用CSS+JavaScript制作的网页图片展示特效，具体用在什么地方你自己定吧!
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
介绍下制作的几个重点：
1. 图片横排
1) 将li左浮动（float:left），可以使图片横排。
2) 利用li的负右边距（margin-right的负值），使后面的向左移动叠加在前面的li之上。
.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. 边框
图片有1px的白色边框，但是需要注意的是，左右相邻的2个图片之间的边框只有1px，右边框是后面图片的左边框。因此实现的思路是：上/下/右边框用ul的边框来实现，而左边框由图片的边框实现。
.recomm ul {
border:1px solid #fff;
border-left:none;
}
.recomm li img {
display:block;
border-left:1px solid #fff;
}
3. 尺寸的计算
此处最容易糊涂的地方是边框与宽度。
图片包括边框，如果设计的宽度为250px，那么图片的实际宽度应为248px（250px-2px）。（高度同理）
由于ul有1px的右边框，因此ul的CSS设定宽度为设计宽度-1px，本例中为599px（600px-1px）。
.recomm ul {
……
height:168px;
width:599px;
}
.recomm li img {
……
width:248px;
height:168px;
}
4. IE内的问题
在IE内，虽然对ul设定了overflow:hidden，但是会出现如图5所示的情况。因此，需要对ul设定position:absolute，以使其能正确隐藏溢出的内容。
5. h5的显示与隐藏
h5内是图片的简要说明，默认状态不显示，当鼠标指向图片的时候会显示出来。
h5是叠加在图片上的，因此使用绝对定位来控制其位置，同时，为了使其相对于li绝对定位，因此给li设定相对定位以产生包含块。
.recomm li h5 {
position:absolute;
bottom:0;
left:0;
……
}
.recomm li:hover h5, .recomm .lay-on h5 {
display:block;
}
更多的鼠标感应的网页图片展示特效请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源：
网页教学网
日期：2009-4-1
