每月两个小小项目——CSS3简易照片墙
作者:互联网
目录
项目实现图片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,小小,width,px,height,简易,Math,var,css 来源: https://blog.csdn.net/AIWWY/article/details/115242753