非常惊艳的Css3的桌面上散落的相片效果，以及单击放大图片的LightBox效果（独立Js非jQuery）的实现原理

 

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

           

               
               

                    blue-green-nature
               

           

           

               
               

                    2-breast-stroke
               

           

           

               
               

                    farm
               

           

           

               
               

                    bahnhoff
               

           

            ……

 

先定义一块桌布，也就是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的效果，

$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 widget实例化，得到的效果就能点击，动画效果的打开图片大图了。^_^祝各位使用愉快!

LightBox源代码

相片分散效果源代码