CSS+JS构建的图片查看器

2019-04-15 16:52发布


 

 

夕阳下的圣母大堂


 

  

       
  • 夕阳下的圣母大堂

  •    
  • Lovely Baby

  •    
  • 优秀历史建筑红十会医院

  •    
  • 百代公司旧址

  •    
  • 人骨教堂内部装饰

  •    
  • 人骨教堂

  •    
  • 有趣的椅子

  •    
  • 卡夫卡的故居

  •   

 

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