Demo地址http://xueduany.github.com/KitJs/KitJs/index.html#lightbox

效果图如下

?

实现原理很简单，基本的html如下

<div id="gallery">
??????????? <div class="item">
??????????????? <a class="kitLightBox" href="img/original/blue-green-nature.jpg" target="_blank"><img src="img/thumbs/blue-green-nature.jpg"></a>
??????????????? <div class="desc">
??????????????????? blue-green-nature
??????????????? </div>
??????????? </div>
??????????? <div class="item">
??????????????? <a class="kitLightBox" href="img/original/2-breast-stroke.jpg" target="_blank"><img src="img/thumbs/2-breast-stroke.jpg"></a>
??????????????? <div class="desc">
??????????????????? 2-breast-stroke
??????????????? </div>
??????????? </div>
??????????? <div class="item">
??????????????? <a class="kitLightBox" href="img/original/farm.jpg" target="_blank"><img src="img/thumbs/farm.jpg"></a>
??????????????? <div class="desc">
??????????????????? farm
??????????????? </div>
??????????? </div>
??????????? <div class="item">
??????????????? <a class="kitLightBox" href="img/original/bahnhoff.jpg" target="_blank"><img src="img/thumbs/bahnhoff.jpg"></a>
??????????????? <div class="desc">
??????????????????? bahnhoff
??????????????? </div>
??????????? </div>

??????????? ……

?

先定义一块桌布，也就是div id=”gallery”

然后按照顺序，排列一竖列相册，div class=”item”，里面用一个a链接把图片包起来

?

接下来，我们要实现相片的分散效果，