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

YF-SOD

于 2021-03-26 14:48:47 发布

阅读量279

点赞数

分类专栏：小小项目文章标签： CSS3照片墙 JS+CSS3小小项目 JS+CSS3照片墙 web小小项目照片墙 jQueryCSS3项目照片墙

本文链接：https://blog.csdn.net/AIWWY/article/details/115242753

版权

小小项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

项目实现图片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;
		}
	})
	
}

YF-SOD

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
每月两个小小项目——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等值。详细版的是将点击.
复制链接

扫一扫