脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 非jQuery实现照片散落桌子上点击放大LightBox效果

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

 更新时间：2014年11月28日 11:25:30   投稿：hebedich  
本文给大家介绍一款js实现的照片散落桌子上点击放大图片的LightBox效果，非常的炫酷，而且是非jQuery实现的，有需要的小伙伴可以参考下

效果图如下

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

您可能感兴趣的文章:

相关文章

  • JavaScript监听手机物理返回键的两种解决方法

    JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API，所以只能使用 popstate 事件监听。接下来通过本文给大家分享JavaScript监听手机物理返回键的两种解决方法，感兴趣的朋友一起看看吧
    2017-08-08
  • Javascript函数技巧学习

    Javascript函数技巧学习

    这篇文章主要介绍了Javascript函数技巧学习，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
    2022-07-07
  • 详解ES6 系列之异步处理实战

    详解ES6 系列之异步处理实战

    这篇文章主要介绍了详解ES6 系列之异步处理实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • javascript动画效果类封装代码

    javascript动画效果类封装代码

    javascript动画效果类封装代码...
    2007-08-08
  • TypeScript学习笔记之类型缩小

    TypeScript学习笔记之类型缩小

    在TypeScript中若一个变量使用了联合类型,那么当我们使用该变量时必不可少的会去明确的限制该变量的具体类型，这称为类型缩小,这篇文章主要给大家介绍了关于TypeScript学习笔记之类型缩小的相关资料,需要的朋友可以参考下
    2022-09-09
  • switchery按钮的使用方法

    switchery按钮的使用方法

    下面小编就为大家分享一篇switchery按钮的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 微信小程序车牌号码模拟键盘输入功能的实现代码

    微信小程序车牌号码模拟键盘输入功能的实现代码

    这篇文章主要介绍了微信小程序车牌号码模拟键盘输入功能的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-11-11
  • 微信小程序实现全局状态管理的方法整理

    微信小程序实现全局状态管理的方法整理

    已知微信小程序中如果要做到全局状态共享，常用的有四种方式，分别是globalData、本地缓存、mobx-miniprogram和westore，本文将带大家看看mobx-miniprogram是如何实现的小程序的全局状态管理，需要的可以收藏一下
    2023-06-06
  • JavaScript调试的多个必备小Tips

    JavaScript调试的多个必备小Tips

    这篇文章主要给大家介绍了关于JavaScript调试的多个必备小Tips，文章给出了详细的介绍与示例代码，有需要的朋友们可以参考借鉴，下面来一起学习学习学习吧。
    2017-01-01
  • 利用JavaScript将普通数字转换为带有千分位分隔符格式的多种实现方法

    利用JavaScript将普通数字转换为带有千分位分隔符格式的多种实现方法

    如何利用 JavaScript 将普通数字转换为带有千分位分隔符的格式,我们将介绍多种方法,包括使用内置的 toLocaleString() 方法、Intl.NumberFormat 对象以及自定义函数来实现数字格式化,需要的朋友可以参考下
    2023-12-12

最新评论