项目实现图片GIF

项目思想

把25张名为0.jpg~24.jpg的图片放入25个li标签中，按5行5列在ul中排列，之后通过Math.random设置每张图片的translate、rotate值，之后绑定点击事件

简洁版的是将每张图片还原到未设置translate、rotate值之前，然后将每张图片的src设置为点击图片地址，再将其定位到0，0位置并改变宽高为ul宽高，即25张相同的图片覆盖到一起了，再次点击，通过拿到li的序号还原位置加重新设置translate等值。
详细版的是将点击图片放到位置0，0处，并设置宽高为ul的宽高，再通过siblings设置其他li的display为none，再次点击只还原那一张图片并设置其他display值。

详细版（带大量解释）

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script><link rel="stylesheet" href="photoWall.css">
</head>
<body><div class="wrapper"><ul class="list"></ul></div><script src="photoWall.js"></script>
</body>
</html>

CSS代码

*{padding:0;margin:0;list-style: none;
}
html,body,.wrapper{height: 100%;width: 100%;background-color: aliceblue;
}
.wrapper{position: relative;
}
.list{width: 80%;height: 80%;/* border: 1px solid black; */margin:auto;/* 居中对齐，50%-1/2width=50%-40%=10% */position: absolute;top:10%;left: 10%;perspective:700px;/* perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。单独使用无效果，要配合rotateX或rotateY或tranlateZ等能改变空间的属性一起使用时才会生效，产生透视效果，其中perspective越大，距离越远，会使视图内容越小 */
}
li{/* transform-style: preserve-3d; */transition: all 2s;/* 使点击后变成大图有2s的过度时间 */
}

JS代码

ulWidth = parseInt($('.list').css('width'));
ulHeight = parseInt($('.list').css('height'));
function createLi() {// 生成5*5的li列表放入序号为0~24的图片。for (var i = 0; i < 5; i++) {for (var j = 0; j < 5; j++) {$('<li><img src=""></li>').css({width: '20%',height: '20%',// 定位每个li使其在ul中按顺序排列position: 'absolute',left: j * (ulWidth / 5) + 'px',top: i * (ulHeight / 5) + 'px',transform: 'scale(0.9) rotate(' + (Math.random() * 40 - 20) + 'deg)' +'translateX(' + (30 * j - 60) + 'px)' +'translateY(' + (30 * i - 60) + 'px)' +'translateZ(-' + Math.random() * 300 + 'px)'// scale（0.9）代表视图大小为原来的0.9倍，rotate默认的是rotateZ上的度数，即平面上旋转度数，然后以顺时针进行，rotateX表示空间的水平方向旋转，rotateY表示空间的垂直方向旋转，该句话表示平面旋转0~20度// 通常translateX表示向右移动距离，translateY表示向下移动距离，注意当旋转时，平移的XY轴也会跟着旋转。translateZ表示空间距离，0是初始距离，Z越大视图越大，负得越多，视图越小。}).find('img').attr('src', 'img/' + (i * 5 + j) + '.jpg').css({width: '100%',height: '100%'}).end().appendTo($('.list'));// 找到选取内容的子元素标签img，并设置其属性src为背景图片相对路径，在添加至ul列表中.注意第一个css设置的是li标签的，第二个设置的是选中的img标签。// 以上这种写法会产生bug，虽然打开浏览器查看，看上去排列和定位的位置都没有问题，但是当我们缩小或放大浏览器时，定位会出现问题，使图片不会铺满ul这// 是因为定位没有使用百分比而宽高使用百分比造成的。在缩放浏览器时，百分比是会根据浏览器大小而改变的，但是定位却没有改变。注意即使是定位使用百分比将// left,top分别改为(j*20+'%')和(i*20+'%')，放缩时还是一样的，因为系统内部会转换为像素值，而不会随浏览器大小改变，所以我们应该像简洁版中的都使用像素值。这里我们就不去修改了。}}
}
createLi();
var change = true;
// 注意top为window对象变量不能取top名
var liLeft, liTop;
function bindLi() {$('li').on('click', function () {// 给选中的图片定位到0,0处，并改变大小为ul的宽高,还原transform值。if (change) {// 记录之前的位置，方便再次点击时还原位置。liLeft = parseInt($(this).css('left'));liTop = parseInt($(this).css('top'));$(this).css({left: '0',top: '0',width: ulWidth + 'px',height: ulHeight + 'px',transform: 'scale(1) rotate(0deg) translateX(0px) translateY(0px) translateZ(0px)'})// 给未选中的图片设置不显示$(this).siblings().css('display', 'none');change = false;} else {// 将选中图片还原为小图。$(this).css({width: '20%',height: '20%',position: 'absolute',left: liLeft + 'px',top: liTop + 'px',// 根据left: j * (ulWidth / 5) + 'px',top: i * (ulHeight / 5) + 'px'算出j和i分别为liLeft*5/ulWidth,liTop*5/ulHeight,然后通过Math.round四舍五入取整即可。transform: 'scale(0.9) rotate(' + (Math.random() * 40 - 20) + 'deg)' +'translateX(' + (30 * Math.round(liLeft * 5 / ulWidth) - 60) + 'px)' +'translateY(' + (30 * Math.round(liTop * 5 / ulHeight) - 60) + 'px)' +'translateZ(-' + Math.random() * 300 + 'px)'})// 将其他图片还原$(this).siblings().css('display', 'inline-block');change = true;}})
}
bindLi();

简洁版（不带解释）

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script><link rel="stylesheet" href="demo.css"></head>
<body><div class="wrapper"><ul class="wrapUl"></ul></div><script src="demo.js"></script>
</body>
</html>

CSS代码

*{margin: 0;padding: 0;list-style: none;
}
html,body,.wrapper{width: 100%;height: 100%;background-color: #cecece;
}
.wrapUl{width: 80%;height: 80%;position: relative;margin: 50px auto;perspective: 700px;
}
.wrapUl li{position: absolute;background-color: #fff;transform-style: preserve-3d;
}
img{width: 100%;height: 100%;
}
.box{height: 100%;width: 100%;transform: scale(0.9);
}

JS代码

var wrapUl = $('.wrapUl');
var wrapW = parseInt(wrapUl.css('width'));
var wrapH = parseInt(wrapUl.css('height'));
var liW = wrapW/5;
var liH = wrapH/5;
createDom();
function createDom(){for(var i=0; i < 5; i++){for (var j=0;  j < 5 ; j++) {$('<li><div class="box"><img src=""></div></li>').css({width:liW + 'px',height:liH + 'px',left:j * liW + 'px',top: i * liH + 'px',transform:'scale(0.9) rotate('+ (Math.random() * 40 -20) + 'deg)' +'translateX(' + (30 * j - 60) +'px)' +'translateY(' + (30 * i - 60) +'px)' +'translateZ(-' + Math.random() * 300 +'px)' }).find('img').attr('src','./img/' +(i*5 + j) + '.jpg').end().appendTo(wrapUl);}}bindEvent();
}
function bindEvent(){var change = true;wrapUl.find('li').on('click',function(){if(change){var bgImg = $(this).find('img').attr('src');var bgLeft = 0,bgTop = 0;$('li').each(function (index){var $this = $(this);$this.delay(10*index).animate({'opacity':0},200,function(){$this.css({'transform':'rotate(0deg)' +'translateX(0px)' +'translateY(0px)' +'translateZ(0px)'});$this.find('.box').css({'transform': 'scale(1)'})$this.find('img').attr('src',bgImg).css({'position':'absolute','width':wrapW +'px','height':wrapH +'px','left':-bgLeft,'top':-bgTop})bgLeft += liW;if(bgLeft >= wrapW){bgTop += liH;bgLeft = 0;}$this.animate({'opacity':1},200);})})change = false;}else{$('li').each(function(index){var j = index % 5;var i = Math.floor(index / 5);var $this = $(this);$this.animate({'opacity':1},200,function(){$this.find('img').css({'position':'absolute','width':'100%','height':'100%','left': 0,'top': 0});$this.find('img').attr('src','./img/'+ index + '.jpg')$this.css({'transform':'scale(0.9) rotate('+ (Math.random() * 40 -20) + 'deg)' +'translateX(' + (30 * j - 60) +'px)' +'translateY(' + (30 * i - 60) +'px)' +'translateZ(-' + Math.random() * 300 +'px)' })})})change = true;}})}

每月两个小小项目——CSS3简易照片墙相关推荐

毕业一年，我是如何实现每月两千副业之路
可能看到这篇文章的标题的时候,大家都觉得很浮夸,也可能有人觉得我是在编故事. 但我相信,懂的人是会明白的. 就不截图了,说正事,二零一八年十一月十一日,距离毕业一年四个月,完成了自己的一个小目标,虽然 ...
两步完成项目定时启动，java项目定时启动
两步完成项目定时设置: 在需要定时启动或运行的方法上面加上注解@Scheduled //当天只跑一次 @Scheduled(cron = "0 40 21 * * ?") 在启动类 ...
Android studio导入另外一个项目作为Library后出现两个启动项目等各类问题
首先说正确的导入Library的方式: 1.启动AndroidStudio后,打开你需要接收Library的项目.比如有两个项目,项目A,和Library项目B,那么打开项目A. 2.在下拉菜单中依 ...
共享两个做项目最常用功能操作的封装类
(转载http://www.seaskyer.net/Index/Catalog12/223.html) 共享两个做项目最常用功能操作的封装类一．显示消息对话框类做项目时总免不了要弹出对话框,或 ...
java两个web项目之间如何传值,两个项目之间传递参数有关问题 - 大神进
两个项目之间传递参数问题 --- 大神进情况 1.两个ssh项目 oms 与 GiftERP 2.调用的是GiftERP的一个Goods表,需要将表数据返回给oms项目 3.首先我oms的页面有一 ...
【QT项目】简易五子棋游戏（人机对战）— 完整源码
文章目录前言一.游戏实现效果二.需求分析三.解决方案四.核心步骤 1.插入棋盘图 2.双方落子 3.输赢判定 4.重新开始五.完整源码 1.main.cpp 2.chessboard.h ...
将两个android项目整合，并在父项目中使用子项目的功能
将两个android项目整合到一起,并在父项目中使用子项目的功能前言 android小白,课设需要整合两个项目,并且使用子项目的功能.简单记录一下整合过程. 整合思路将子项目设置为library, ...
2020暑假集训项目——Java简易聊天室
经过一周的学习与搬砖,我成功的完成了暑假集训的第一个项目--Java简易聊天室,这里对整个项目做一个总结.(文末附下载地址) 本项目支持的功能: 1.可同时开启多个客户端进行多人聊天: 2.可与在线的 ...
[Android]如何整合两个安卓项目
Android Studio 2020.3北极狐把两个安卓项目整合为一个安卓项目.或者在一个已有的安卓项目中添加另一个安卓项目. 以参考资料1 为例子,找到项目核心代码. 在文件夹中 ...

每月两个小小项目——CSS3简易照片墙

项目实现图片GIF

项目思想

详细版（带大量解释）

HTML代码

CSS代码

JS代码

简洁版（不带解释）

HTML代码

CSS代码

JS代码

每月两个小小项目——CSS3简易照片墙相关推荐

最新文章

热门文章