非jQuery實現(xiàn)照片散落桌子上，單擊放大的LightBox效果

更新時間：2014年11月28日 11:25:30 投稿：hebedich

本文給大家介紹一款js實現(xiàn)的照片散落桌子上點擊放大圖片的LightBox效果，非常的炫酷，而且是非jQuery實現(xiàn)的，有需要的小伙伴可以參考下

效果圖如下

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

實現(xiàn)原理很簡單，基本的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鏈接把圖片包起來

接下來，我們要實現(xiàn)相片的分散效果，

復制代碼代碼如下:

$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，設置為絕對定位，用桌布高寬，生成隨機數(shù)，排列，對于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框架來實現(xiàn)的，小伙伴們如果不是很了解，那么后續(xù)文章，我們來詳細介紹下這款非常棒的js框架。

您可能感興趣的文章: