个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章非jQuery实现照片散落桌子上，单击放大的LightBox效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

效果图如下 。

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

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

Demo地址http://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html 。

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

  。

复制代码 代码如下:

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

  。

            …… 。

  。

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

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

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

  。

复制代码 代码如下:

$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)'
});
})

  。

  。

这里的是$k是kit的写法，类似jQuery的$，API完全一样，这段代码的意思是找到所有item的div，设置为绝对定位，用桌布高宽，生成随机数，排列，对于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框架.

最后此篇关于非jQuery实现照片散落桌子上，单击放大的LightBox效果的文章就讲到这里了,如果你想了解更多关于非jQuery实现照片散落桌子上，单击放大的LightBox效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： Javascript前端UI框架Kit使用指南之kitjs的对话框组件
文章推荐： Javascript前端UI框架Kit使用指南之Kitjs简介
文章推荐： 黑潮之上兑换码怎么使用 兑换码使用方法详解
文章推荐： 开源的javascript项目Kissy介绍
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com