利用HTML、CSS实现的图片预览弹出层的教程

　　本篇效果利用HTML、CSS和Jq实现的图片点击预览功能，在预览时也可以点击切换图片。图片1为整体效果，图片2是点击图片1后出现被点击图片的预览图片的名称以及说明。

图片1

图片2

　　实现的代码：

　　html代码：

XML/HTML Code复制内容到剪贴板

<div id="ImageMain"> <img src="1img1.jpg"/><img src="1img2.jpg"/> <img src="1img3.jpg"/> <img src="1img4.jpg"/> <img src="1img5.jpg"/> <img src="1img6.jpg"/> </div>     
<div id="ImageScaBg"></div>     
<div id="ImageSca">     
   <div id="ImageContainer">     
      <img id="imgCenter" src="1img3.jpg"/>     
      <div id="imgLunbo"><img class="imgLunboItem" src="1img1.jpg"/></div>     
   </div>     
   <div id="ImageInfo">     
     <h3 id="imgName"></h3>     
     <p id="imgInfo"></p>     
   </div>     
</div>    

　　css3代码：

CSS Code复制内容到剪贴板

#ImageMain {     
    width: 630px;     
    height: 500px;     
    margin: 0 auto;     
    margin-top: 100px;     
}     
#ImageMain>img{     
    width:200px;     
    height:200px;     
    cursor:pointer;     
    float:left;     
    margin-left:10px;     
    margin-top:10px;     
}     
#ImageMain>img:hover{     
    opacity:0.8;     
}