非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 相关文章推荐
js实现单一html页面两套css切换代码
Apr 11 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
小程序实现横向滑动日历效果
Oct 21 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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
php session的锁和并发
2016/01/22 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
用javascript实现自定义标签
2007/05/08 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
python实现rsa加密实例详解
2017/07/19 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
四种会话跟踪技术
2015/05/20 面试题
学生处主任岗位职责
2013/12/01 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
教师职称自我鉴定
2014/02/12 职场文书
语文教学随笔感言
2014/02/18 职场文书
医学生求职自荐书
2014/06/12 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js