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


Posted in Javascript onNovember 28, 2014

效果图如下

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

Javascript 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
开源的javascript项目Kissy介绍
Nov 28 #Javascript
对比分析json及XML
Nov 28 #Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 #Javascript
javascript基本类型详解
Nov 28 #Javascript
javascript中数组array及string的方法总结
Nov 28 #Javascript
20条学习javascript的编程规范的建议
Nov 28 #Javascript
20个实用的JavaScript技巧分享
Nov 28 #Javascript
You might like
重置版战役片段
2020/04/09 魔兽争霸
使用php shell命令合并图片的代码
2011/06/23 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
python的列表List求均值和中位数实例
2020/03/03 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
运动会口号16字
2014/06/07 职场文书
校庆口号
2014/06/20 职场文书
党员示范岗材料
2014/12/19 职场文书
古诗之感恩老师
2019/10/24 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL