非jQuery实现照片散落桌子上,单击放大的LightBox效果
效果图如下Demo地址实现原理很简单,基本的html如下先定义一块桌布,也就是div id=”gallery”然后按照顺序,排列一竖列相册,div class=”item”,里面用一个a链接把图片包起来接下来,我们要实现相片的分散效果,这里的是$k是kit的写法,类似jQuery的$,API完全一样,这段代码的意思是找到所有item的div,设置为绝对定位,用桌布高宽,生成随机数,排列,对于css3,使用css3特有的旋转效果'rotate属性,旋转一定角度这个时候,相片就开始分散开了,达到了图1的效果,接下来我们要做一下LightBox的效果,完整代码如上,对于每个图片的a链接,使用kitjs的lightbox UI widget实例化,得到的效果就能点击,动画效果的打开图片大图了。^_^祝各位使用愉快!
用户评论