非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 相关文章推荐
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
JavaScript 乱码问题
Aug 06 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 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
php UBB 解析实现代码
2011/11/27 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
原生js开发的日历插件
2017/02/04 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Python日期的加减等操作的示例
2017/08/15 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python中wheel的用法整理
2020/06/15 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
六查六看剖析材料
2014/02/15 职场文书
体操比赛口号
2014/06/10 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
数学教师求职信范文
2015/03/20 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
zabbix配置nginx监控的实现
2022/05/25 Servers
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库