非jQuery实现照片散落桌子上,单击放大的LightBox效果

效果图如下

演示地址http://雪杜尼。github。io/KitJs/KitJs/demo/Lightbox-Gallery/demo。超文本标记语言

实现原理很简单，基本的超文本标记语言如下

复制代码代码如下： div id=' gallery ' div class=' item ' a class=' kitLightBox ' href=' img/original/blue-green-nature。jpg ' target=' _ blank ' img src=' http : img/thumbs/blue-green-nature。jpg/a div class=' desc '蓝色-绿色-自然/div/div class=' item ' a class=' KitLightBox ' href=' img/original/2-蛙泳。jpg ' target='

……

先定义一块桌布，也就是div id="gallery "

然后按照顺序，排列一竖列相册，div class="item "，里面用一个a链接把图片包起来

接下来，我们要实现相片的分散效果，

复制代码代码如下：港元(函数(){$k ').项目，$k('#gallery ').每个（函数(){$k(this)).CSS({ top : $套件。数学。兰特(k(#画廊').innerHeight()) 'px '，左：美元套件。数学。兰特(k('画廊').innerWidth())"px "，"-web kit-transform " : " rotate($ kit。数学。rand(-40，40)' deg)' })；})

这里的是k美元是装备的写法，类似jQuery的$，API完全一样，这段代码的意思是找到所有项目的div，设置为绝对定位，用桌布高宽，生成随机数，排列，对于css3，使用css3特有的旋转效果辐状的属性，旋转一定角度

这个时候，相片就开始分散开了，达到了图一的效果，接下来我们要做一下LightBox的效果，

复制代码代码如下：港元(函数(){$k ').项目，$k('#gallery ').每个（函数(){$k(this)).CSS({ top : $套件。数学。兰特(k(#画廊').innerHeight()) 'px '，左：美元套件。数学。兰特(k('画廊').innerWidth())"px "，"-web kit-transform " : " rotate($ kit。数学。rand(-40，40)' deg)' })；}).pushStack('a.kitLightBox ').每个（函数(){新的$ kit。ui。LightBox({ El : this }).init()；});});

完整代码如上，对于每个图片的a链接，使用kitjs的灯箱用户界面小部件实例化，得到的效果就能点击，动画效果的打开图片大图了。^_^祝各位使用愉快！

LightBox源代码https://github。com/xuduany/Kitjs/blob/master/Kitjs/src/js/widget/灯箱/灯箱。射流研究…

相片分散效果源代码https://github。com/xuduany/KitJs/blob/master/KitJs/demo/Lightbox-Gallery/demo。超文本标记语言

本文是基于KITJS框架来实现的，小伙伴们如果不是很了解，那么后续文章，我们来详细介绍下这款非常棒的射流研究…框架。