使用css-overflow属性控制大小缩略图
纯css控制 ,没用javascript. 值得学习.
<!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>Create Resizing Thumbnails With Overflow Property</title>
</meta>
<style>
/* general */
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;
}
/* // general */
/* thumbnail list */
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;
}
/* mouse over */
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
ul#thumbs a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* clearing floats */
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%;
}
/* // clearing floats */
/* // thumbnail list */
/* single thumbnail */
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;
}
/* // mouse over */
/* // single thumbnail */
</style>
</head>
<body>
<h1>使用overflow属性控制大小缩略图</h1>
<h2>缩略图列表</h2>
<ul id="thumbs">
<li><a href="http://www.cssrain.cn"><img src="http://www.cssrain.cn/skins/tim/logo-jq.gif" /></a></li>
<li><a href="http://www.cssrain.cn"><img src="http://www.cssrain.cn/demo/pic/zhihuanbiao.jpg" /></a></li>
<li><a href="http://www.cssrain.cn"><img src="http://www.cssrain.cn/demo/pic/upan1.jpg" /></a></li>
<li><a href="http://www.cssrain.cn"><img src="http://www.cssrain.cn/demo/pic/skype3.jpg" /></a></li>
<li><a href="http://www.cssrain.cn"><img src="http://www.cssrain.cn/demo/pic/skype2.jpg" /></a></li>
</ul>
<h2>单个缩略图</h2>
<p class="thumb"><a href="http://www.cssrain.cn"><img src="http://www.cssrain.cn/demo/pic/zhihuanbiao.jpg" /></a></p>
<p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec pede. Vivamus euismod, odio eu sagittis tempor, ligula felis congue nunc, sit amet imperdiet mi nulla sed quam. In pulvinar bibendum urna. Nulla massa. Proin vulputate ornare risus. Nunc vel augue. Quisque vel magna. Cras tristique dignissim libero. Curabitur sagittis nibh eget arcu euismod blandit. Phasellus rhoncus. Proin congue risus sed dui.<br />
Mauris non metus. Donec sem ligula, feugiat a, porta quis, sagittis ut, elit. Nulla pellentesque justo. Morbi feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eros lorem, dapibus eget, varius in, hendrerit id, tortor. Fusce gravida arcu non lorem. Suspendisse nibh. Morbi et arcu. Vestibulum sodales interdum massa. </p>
<p>create by <a href="Css'http://www.cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property">Css Globe</a>
<a href="cssrainhttp://www.cssrain.cn">cssrain</a>整理</p>
</body>
</html>
