效果图如下
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框架。
您可能感兴趣的文章:
- jquery 单击li防止重复加载的实现代码
- 使用JQuery和CSS模拟超链接的用户单击事件的实现代码
- Jquery为单选框checkbox绑定单击click事件
- jQuery 全选/反选以及单击行改变背景色实例
- jquery禁用右键单击功能屏蔽F5刷新
- jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
- jQuery+ajax实现鼠标单击修改内容的方法
- jQuery+ajax实现鼠标单击修改内容的思路
- 一款基jquery超炫的动画导航菜单可响应单击事件
- jQuery实现多按钮单击变色
- jQuery实现单击和鼠标感应事件
