纯JavaScript实现照片散落桌面及点击放大LightBox效果

非jQuery实现照片散落桌子单击放大LightBox效果

效果展示见下图。

在线演示地址：http://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html

实现逻辑并不复杂，基础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>
            ……

首先定义一个容器，即id为“gallery”的div元素，作为放置照片的背景区域。

接着按顺序排列多个class为“item”的div元素，每个元素内包含一个a标签包裹的图片链接。

接下来，我们需要实现照片在容器内随机分散的效果。

$k(function() {
$k('.item', $k('#gallery')).each(function() {
$k(this).css({
top : $kit.math.rand($k('#gallery').innerHeight()) + 'px',
left : $kit.math.rand($k('#gallery').innerWidth()) + 'px',
'-webkit-transform' : 'rotate(' + $kit.math.rand(-40, 40) + 'deg)'
});
})

上述代码中$k代表KitJS库，其API与jQuery相似。该段代码遍历所有item div，设置绝对定位，并根据容器的高宽生成随机坐标进行排列。同时利用CSS3的rotate属性，使每张照片在-40到40度之间随机旋转。

此时，照片开始分散，实现图1所示效果，随后需实现LightBox功能，

$k(function() {
$k('.item', $k('#gallery')).each(function() {
$k(this).css({
top : $kit.math.rand($k('#gallery').innerHeight()) + 'px',
left : $kit.math.rand($k('#gallery').innerWidth()) + 'px',
'-webkit-transform' : 'rotate(' + $kit.math.rand(-40, 40) + 'deg)'
});
}).pushStack('a.kitLightBox').each(function() {
new $kit.ui.LightBox({
el : this
}).init();
});
});

完整代码如上。针对每个图片的a链接，使用KitJS的LightBox UI组件进行实例化并调用init方法，即可实现点击图片后以动画效果打开大图的功能。

LightBox组件源代码地址：https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/widget/LightBox/lightbox.js

照片散落效果演示源代码地址：https://github.com/xueduany/KitJs/blob/master/KitJs/demo/Lightbox-Gallery/demo.html

本文基于KitJS框架实现，若读者对该框架不熟悉，后续文章将详细介绍这款优秀的JavaScript库。