图片展示代码
CSS+JS构建的图片查看器
看看效果
2008.10.15
xhtml部分
<div id="album">
<div id="pic"><img src="code_1.jpg" alt="" id="placeholder" /></div>
<p id="desc">夕阳下的圣母大堂</p>
<div id="thumbs">
<ul>
<li><a onclick="return showPic(this);" href="code_1.jpg" title="夕阳下的圣母大堂"><img src="code_s1.jpg" alt="夕阳下的圣母大堂" /></a></li>
<li><a onclick="return showPic(this);" href="code_2.jpg" title="Lovely Baby"><img src="code_s2.jpg" alt="Lovely Baby" /></a></li>
<li><a onclick="return showPic(this);" href="code_3.jpg" title="优秀历史建筑红十会医院"><img src="code_s3.jpg" alt="优秀历史建筑红十会医院" /></a></li>
<li><a onclick="return showPic(this);" href="code_4.jpg" title="百代公司旧址"><img src="code_s4.jpg" alt="百代公司旧址" /></a></li>
<li><a onclick="return showPic(this);" href="code_5.jpg" title="人骨教堂内部装饰"><img src="code_s5.jpg" alt="人骨教堂内部装饰" /></a></li>
<li><a onclick="return showPic(this);" href="code_6.jpg" title="人骨教堂"><img src="code_s6.jpg" alt="人骨教堂" /></a></li>
<li><a onclick="return showPic(this);" href="code_7.jpg" title="有趣的椅子"><img src="code_s7.jpg" alt="有趣的椅子" /></a></li>
<li><a onclick="return showPic(this);" href="code_8.jpg" title="卡夫卡的故居"><img src="code_s8.jpg" alt="卡夫卡的故居" /></a></li>
</ul>
</div>
</div>
css部分
#album {
margin: .5em auto;
padding-bottom: 10px;
width: 430px;
background: #EEEEEE;
font-size: 12px;
text-align: left;
}
#album p, #album ul, #album li, #album img {
padding: 0;
margin: 0;
border: 0;
}
#album a {
text-decoration: none;
}
#pic{
margin: 10px;
width: 400px;
height: 300px;
overflow: hidden;
border: solid 5px #FFFFFF;
float: left;
}
* html #pic{
display: inline;
width: 410px;
}
#desc{
text-align: center;
float: left;
width: 430px;
}
#thumbs{
height: 80px;
clear: left;
width: 400px;
margin: 0 15px;
overflow: auto;
overflow-y: hidden;
}
#thumbs ul{
width: 520px;
padding: 5px 0;
}
#thumbs img{
width: 60px;
height: 50px;
}
#thumbs ul li{
float: left;
padding: 0 3px 0 2px;
}
#thumbs ul li a{
background: transparent;
}
JavaScript部分
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}