炫酷照片墙，代码简单易懂

还是在分享源代码之前，先晒一下照片

原图是这样的，然后随便点一张小图

它会慢慢的看似拼凑出点的那张图的大图】

这里要注意，是慢慢拼凑出，而且再点击一下这个大图，这个大图又会慢慢分散成原来分散的小图片

下面来看一下源代码

html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相册</title><style type="text/css">
* {margin: 0;padding: 0
}body {background-color: #e8e3da;
}ul {list-style: none
}#wrap {width: 980px;height: 500px;
}#wrap li {position: absolute;left: 0;top: 0;transition: transform 1500ms ease-out;background-color: white;
}.box {width: 100%;height: 100%;background-size: cover;transition: transform 1500ms ease-out;
}.center {margin: auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
</style><script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {var collums = 5;//列var rows = 5;//行var wrap = $('#wrap');var w = wrap.width() / rows;var h = wrap.height() / collums;for (var r = 0; r < rows; r++) {for (var c = 0; c < collums; c++) {$('<li><div class="box"></div></li>').width(w).height(h).css({'left': w * c + 'px','top': h * r + 'px','transform': 'scale(0.9) rotate(' + (Math.random() * 40 - 20) + 'deg) ' +'translateX(' + (30*c-60) + 'px)' +'translateY(' + (30*r-60) + 'px)'}).find('.box').css({'background-image': 'url(images/' + (r * collums + c) + '.jpg)','transform': 'scale(0.9)'}).end().appendTo(wrap)}}var change = true;wrap.find('li').on('click', function () {if (change == true) {var bgImg = $(this).find('div').css('background-image');var bgLeft = 0;var bgTop = 0;$('#wrap li').each(function (index) {var $this=$(this);$(this).delay(40*index).animate({"opacity":0},200, function () {$this.css({'transform': ' rotate(0deg) ' +'translateX(0)' +'translateY(0)'});$this.find('div').css({'background-image': bgImg,'background-size': 'auto','backgroundPositionX': -bgLeft,'backgroundPositionY': -bgTop,'transform': 'scale(1)'});bgLeft += 196;if (bgLeft >= 980) {bgTop += 100;bgLeft = 0;}$this.animate({"opacity":1},300);})});change = false;} else if (change == false) {$('#wrap li').each(function (index) {var c=index %collums;var r=parseInt(index/collums);var $this=$(this);$(this).delay(40*index).animate({"opacity":0},200, function () {$this.css({'transform': 'rotate(' + (Math.random() * 40 - 20) + 'deg)' +'translateX(' + (30*c-60) + 'px)' +'translateY(' + (30*r-60) + 'px)'});$this.find('div').css({'background-image': 'url(images/' + index + '.jpg)','background-size': 'cover','transform': 'scale(0.9)'});$this.animate({"opacity":1},200);})});change = true;}})
})
</script>
</head>
<body><ul id="wrap" class="center"></ul></body>
</html>

然后js是用的jQuery包

图片的话，只截个图看一下吧

你们也来试一下吧

转载于:https://www.cnblogs.com/qishuang/p/7217591.html

炫酷照片墙，代码简单易懂相关推荐

Linux中一些有用而炫酷的代码
Linux中一些有用而炫酷的代码文章目录 Linux中一些有用而炫酷的代码一.cal 1.当月的日历 2.近三个月的日历 3.一年的日历二.yes 三.htop 四.fortune 五.scre ...
炫酷相册代码，祝对象生日快乐！
gif动图效果: 由于gif只能展示部分效果,你可以通过视频查看效果–>>完整效果请看视频可以更改里面的照片.生日倒计时和背景音乐,需要代做的直接私信我即可. 完整项目地址–>&g ...
详细讲解用Python列表for循环还有if判断语句写出1-100之内的素数，思路清晰语法准确代码简单易懂实用
详细讲解用Python列表for循环还有if判断语句写出1-100之内的素数,思路清晰语法准确代码简单易懂实用,当然还有一定技巧的算法渗透其中.请看视频: Python 代码实例,找出1-100之内的 ...
android炫酷动画代码,Android高级UI特效仿直播点赞动画效果
Android高级UI特效仿直播点赞动画效果发布时间:2020-10-02 16:06:18 来源:脚本之家阅读:117 作者:mrr 本文给大家分享高级UI特效仿直播点赞效果-一个优美炫酷的点赞 ...
python炫酷特效代码_推荐几个炫酷的 Python 开源项目
推荐几个炫酷的 Python 开源项目项目一: Supervisor 简介: Supervisor 是实际企业常用的一款 Linux/Unix 系统下的一个进程管理工具, 基于 Python 开发 ...
你不知道的CSS妙用，纯CSS实现炫酷照片墙
演示地址:https://www.albertyy.com/2020/6/photo.html 原始效果: 鼠标经过效果: 鼠标点击效果: 代码: <!DOCTYPE html> < ...
excel怎么调用c语言程序设计,知识：Excel使用C语言进行读写，代码简单易懂
[FileDemoList.java.rar]-一种递归方法,用于列出文件夹中的所有文件,包括子文件夹,文件夹和文件.您需要修改文件夹的路径名称才能运行. [Exported-2014-06-11.r ...
js炫酷烟花代码，手动自动燃放都可以哦
马上春节啦,咱们程序猿当然要用本土的方式庆贺一下啦,来跟我一起放个烟花吧~ 祝大家新的一年里像烟花一样生活五彩缤纷,绽放光彩! 话不多说,直接看效果✨✨✨ 自动燃放状态:点击下屏幕就会不断往随机位置发 ...
Android 图片轮播框架 ImageSlider 炫酷轮播简单使用
1.Android studio用户添加依赖: compile 'com.squareup.picasso:picasso:2.5.2' compile 'com.nineoldandroids:li ...

炫酷照片墙，代码简单易懂

炫酷照片墙，代码简单易懂相关推荐

最新文章

热门文章