非jQuery實現(xiàn)照片散落桌子上,單擊放大的LightBox效果
效果圖如下
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框架。
- jquery 單擊li防止重復加載的實現(xiàn)代碼
- 使用JQuery和CSS模擬超鏈接的用戶單擊事件的實現(xiàn)代碼
- Jquery為單選框checkbox綁定單擊click事件
- jQuery 全選/反選以及單擊行改變背景色實例
- jquery禁用右鍵單擊功能屏蔽F5刷新
- jQuery實現(xiàn)單擊按鈕遮罩彈出對話框(仿天貓的刪除對話框)
- jQuery+ajax實現(xiàn)鼠標單擊修改內容的方法
- jQuery+ajax實現(xiàn)鼠標單擊修改內容的思路
- 一款基jquery超炫的動畫導航菜單可響應單擊事件
- jQuery實現(xiàn)多按鈕單擊變色
- jQuery實現(xiàn)單擊和鼠標感應事件
相關文章
IE圖片緩存document.execCommand("BackgroundImageCache",
IE6下設置背景圖片是不會被真正cache住的,就算服務器做了cache,如果想cache住只能2011-03-03Threejs與Tween.js結合創(chuàng)建動畫的詳細圖文教程
three.js和tween.js可以一起使用,實現(xiàn)復雜的動畫效果,包括飛線動畫,這篇文章主要給大家介紹了關于Threejs與Tween.js結合創(chuàng)建動畫的相關資料,需要的朋友可以參考下2024-01-01