非jQuery实现照片散落桌子上，单击放大的LightBox效果(2)

时间:2014-12-03 02:14来源:网络整理作者:网络点击: 次

分享到：

复制代码代码如下: $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').

复制代码代码如下:

$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框架。