DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 非jQuery實現照片散落桌子上,單擊放大的LightBox效果
非jQuery實現照片散落桌子上,單擊放大的LightBox效果
編輯:關於JavaScript     

效果圖如下

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的效果,

復制代碼 代碼如下:
$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框架。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved