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

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

图片1

图片2

　　实现的代码：

　　html代码：

1. <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>     
2. <div id="ImageScaBg"></div>     
3. <div id="ImageSca">     
4.    <div id="ImageContainer">     
5.       <img id="imgCenter" src="1img3.jpg"/>     
6.       <div id="imgLunbo"><img class="imgLunboItem" src="1img1.jpg"/></div>     
7.    </div>     
8.    <div id="ImageInfo">     
9.      <h3 id="imgName"></h3>     
10.      <p id="imgInfo"></p>     
11.    </div>     
12. </div>    

　　css3代码：

1. #ImageMain {     
2.     width: 630px;     
3.     height: 500px;     
4.     margin: 0 auto;     
5.     margin-top: 100px;     
6. }     
7. #ImageMain>img{     
8.     width:200px;     
9.     height: