用CSS的overflow属性实现鼠标经过放大缩略图代码
代码简介：
鼠标滑过图片显示缩略图，看上去这个特效很惹人喜欢，闲来无事，在研究CSS，在网上见到类似的效果，又修改了一下，基本实现了鼠标经过缩略图放大图片的功能，主要是运行了CSS的overflow属性，有兴趣的朋友仔细研究一番吧。
代码内容：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>用CSS的overflow属性实现鼠标经过放大缩略图代码 - www.webdm.cn</title>
</meta>
<style>
body {
margin:0;
padding:40px 80px;
background:#fff;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1, h2{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
font-size:140%;
}
p{
margin:1em 0;
}
p.text{
width:500px;
}
a{
color:#f20;
text-decoration:none;
}
a:hover{
color:#999;
}
img{
border:none;
}
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}
ul#thumbs li{
float:left;
margin-right:5px;
border:1px solid #999;
padding:2px;
}
ul#thumbs a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
ul#thumbs a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
ul#thumbs:after, li#thumbs:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
ul#thumbs, li#thumbs{
display:block;
}
ul#thumbs, li#thumbs{
min-height:1%;
}
* html ul#thumbs, * html li#thumbs{
height:1%;
}
p.thumb{
float:left;
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
p.thumb a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
p.thumb a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
/* mouse over */
p.thumb a:hover{
overflow:visible;
z-index:1000;
border:none;
}
p.thumb a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
</style>
</head>
<body>
<h2>缩略图列表</h2>
<ul id="thumbs">
<li><a href="/"><img src="http://www.webdm.cn/images/wall1.jpg" /></a></li>
<li><a href="http://www.codefasn.net"><img src="http://www.webdm.cn/images/wall2.jpg" /></a></li>
<li><a href="/"><img src="http://www.webdm.cn/images/wall3.jpg" /></a></li>
<li><a href="/"><img src="http://www.webdm.cn/images/wall4.jpg" /></a></li>
<li><a href="/"><img src="http://www.webdm.cn/images/wall5.jpg" /></a></li>
</ul>
<h2>单个缩略图</h2>
<p class="thumb"><a href="/"><img src="http://www.webdm.cn/images/wall6.jpg" /></a></p>
<a href="/">webdm.cn</a></p>
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！
</p>
代码来自：http://www.webdm.cn/webcode/e605e521-764d-4f1d-b164-1d1c5fd5edd1.html
