每月两个小小项目——CSS3简易照片墙
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了每月两个小小项目——CSS3简易照片墙，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7393字，纯文字阅读大概需要11分钟。
内容图文
目录
项目实现图片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简易照片墙全部内容，希望文章能够帮你解决每月两个小小项目——CSS3简易照片墙所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】