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

效果图如下

Demo地址

实现原理很简单，基本的html如下

代码如下:

gallery">

stroke

……

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

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

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

代码如下:

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

代码如下:

Box').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框架。

原文地址：https://www.jb51.cc/jquery/57180.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：jquery 操作css样式、位置、尺寸方下一篇：jquery+php实现搜索框自动提示