javascript代码实例教程-非jQuery实现照片散落桌子上,单击放大的LightBox效果

发布时间:2018-12-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-非jQuery实现照片散落桌子上,单击放大的LightBox效果脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

jQuery实现照片散落桌子上,单击放大的LightBox效果。效果图如下

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

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

Demo地址https://xueduany.gIThub.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.htML

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

 

代码如下:


<p id="gallery">
            <p class="item">
                <a class="kitLightBox" href="img/original/blue-green-nature.jpg" target="_blank"><img src="img/thumbs/blue-green-nature.jpg"></a>
                <p class="desc">
                    blue-green-nature
                </p>
            </p>
            <p class="item">
                <a class="kitLightBox" href="img/original/2-breast-stroke.jpg" target="_blank"><img src="img/thumbs/2-breast-stroke.jpg"></a>
                <p class="desc">
                    2-breast-stroke
                </p>
            </p>
            <p class="item">
                <a class="kitLightBox" href="img/original/farm.jpg" target="_blank"><img src="img/thumbs/farm.jpg"></a>
                <p class="desc">
                    farm
                </p>
            </p>
            <p class="item">
                <a class="kitLightBox" href="img/original/bahnhoff.jpg" target="_blank"><img src="img/thumbs/bahnhoff.jpg"></a>
                <p class="desc">
                    bahnhoff
                </p>
            </p>

 

            ……

 

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

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

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

 

代码如下:


$k(function() {
$k(&#39;.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)'
});
})


 

这里的是$k是kit的写法,类似jquery的$,API完全一样,这段代码的意思是找到所有item的p,设置为绝对定位,用桌布高,生成随机数,排列,对于css3,使用css3特有的旋转效果'rotate属性,旋转一定角度

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

 

代码如下:


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

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-非jQuery实现照片散落桌子上,单击放大的LightBox效果全部内容,希望文章能够帮你解决javascript代码实例教程-非jQuery实现照片散落桌子上,单击放大的LightBox效果所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。