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

前端之家收集整理的这篇文章主要介绍了非jQuery实现照片散落桌子上,单击放大的LightBox效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果图如下

Demo地址

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

代码如下:

……

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

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

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

代码如下:

这里的是$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框架。

猜你在找的jQuery相关文章