非jQuery實作照片散落桌上，點選放大的LightBox效果_javascript技巧

效果圖如下

Demo網址http://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html

實作原理很簡單，基本的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原始碼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框架來實現的，小夥伴們如果不是很了解，那麼後續文章，我們來詳細介紹下這款非常棒的js框架。