Front-end——jQuery实现螺旋矩阵打印照片

本文链接：https://blog.csdn.net/weixin_42067873/article/details/112585171

本案例需求：

照片按照螺旋矩阵方式慢慢褪去

使用到：

remove()函数：将当前标签及其子标签一并清除
empty()函数：将当前标签子标签进行清除处理（只清楚子标签）
fadeIn(过渡时间)函数：淡入，从透明0到逐渐过渡到1
fadeOut(过渡时间)函数：淡出，从透明1逐渐过渡到0
addClass(class值)：给标签添加class
removeClass(class值)：删除标签中的class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			@keyframes donghua {
				0% {
					transform: scale(1);
					opacity: 1;
				}
				100%{
					transform: scale(0.5);
					opacity: 0;
				}
			}
			.split{
				animation: donghua 1s forwards;
			}
			#app{
				width: 750px;
				height: 500px;
				position:absolute;
				border:1px solid #000000;
				top: calc((100vh - 500px) / 2);
				left: calc((100vw - 750px) / 2);
			}
			#app>div{
				width: 100%;
				height: 100%;
				position: absolute;
				top:0;
				left:0;
			}
			#app>.btn{
				position: absolute;
				right: 10px;
				bottom: 10px;
				z-index: 2;
			}
			#app>.btn>li{
				width: 20px;
				height:20px;
				background: #9B9B9B;
				list-style: none;
				float:left;
				margin: 0 5px;
				opacity: 0.5;
				box-sizing: border-box;
				border:2px solid #ffffff;
				border-radius:10px;
			}
			#app>.btn>li:hover{
				border-color: #9B9B9B;
				background: #ffffff;
			}
			#app>p{
				position:absolute;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			$(function(){
				// 定义图片的数组
				const images = [
					'img/1.jpg',
					'img/4.jpg',
					'img/8.jpg',
					'img/13.jpg',
					'img/19.jpg'
				]
				// 定义第几个要飞出
				let n = images.length - 1
				// 定义小块的边长为  50
				const side = 50
				// 计算 有多少列
				const column_count = 750 / side
				// 计算 有多少行
				const row_count = 500 / side 
				
				const ul = $('<ul class="btn"></ul>')
				for(let i = 0; i < images.length; i++) {
					$('<div></div>').css({
						background: 'url(' + images[i] + ')'
					}).appendTo($('#app'))
					$('<li></li>').appendTo(ul)
				}
				ul.appendTo($('#app'))
				$('.btn>li').click(function(){
					// 每次点击的时候先清理掉原先的碎片
					$('#app>p').remove()
					// 要知道点击的是哪个li  还要获取点击li 排在兄弟当中第几个
					const index = $(this).index()
					if(index !== n) {
						// 点击的是第几个li 就让第几个图片 显示 其他的隐藏
						$('#app>div').eq(index).fadeIn(1000).siblings('div').fadeOut(1000)
						// 图片飞出 
						// 定义开始行索引和开始列索引 
						let startx = 0
						let starty = 0
						// 定义结束行所以和结束列索引
						let endx = row_count - 1
						let endy = column_count - 1
						// 定义摆放的索引 
						let x = 0
						let y = 0
						// 先把块放上
						for(let i = 0; i < row_count * column_count; i++) {
							const p = $('<p></p>').css({
								width: side + 'px',
								height: side + 'px',
								background: 'url(' + images[n] + ')',
								'background-position': (y * side * -1) + 'px ' + (x * side * -1) + 'px',
								top: (side * x) + 'px',
								left : (side * y) + 'px'
							})
							p.appendTo($('#app'))
							setTimeout(function(){
								p.addClass('split')
							},30 * i)
							
							if(x === startx && y < endy) {
								y++
							} else if( y === endy && x < endx) {
								x++
							} else if(x === endx && y > starty) {
								y--
							} else {
								x--
							}
							if(y === starty && x === startx + 1) {
								startx ++
								starty ++
								endx --
								endy --
							}
						}
						// 本次 索引 index 应该是 下次飞出的 n值 
						n = index
					}
					
				})
			})
		</script>
	</body>
</html>