CSS+JS构建的图片查看器

<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>

#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;
}

 

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;  
 }
}

评论

1 楼 wing5jface 2010-03-27  

LZ的 CSS+JS构建的图片查看器在线效果可看,
http://www.hy2999.com/cssPic/
图片主题换成:关于程序员Code煽情广告
另外底下的图片我换成了文字，可能效果没有那么好，将就