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

时间:2014-12-03 02:14来源:网络整理作者:网络点击: 次

分享到：

本文给大家介绍一款js实现的照片散落桌子上点击放大图片的LightBox效果，非常的炫酷，而且是非jQuery实现的，有需要的小伙伴可以参考下

效果图如下

Demo地址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>

……

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

然后按照顺序，排列一竖列相册，div class=”item”，里面用一个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是kit的写法，类似jQuery的$，API完全一样，这段代码的意思是找到所有item的div，设置为绝对定位，用桌布高宽，生成随机数，排列，对于css3，使用css3特有的旋转效果'rotate属性，旋转一定角度

这个时候，相片就开始分散开了，达到了图1的效果，接下来我们要做一下LightBox的效果，