碎片飞出效果--基于轮播基础--实训day02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>跟着王禹老师混社会zhi螺旋矩阵</title>
		<script type="text/javascript" src="js/jquery-3.5.1.min.js" ></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				height: 100vh;
				display: flex;
			}
			
			
			@-webkit-keyframes donghua{
				0% {opacity: 1; transform:translateX(0) translateY(0) translate(0) rotate(0deg);}
				100% {opacity: 0; transform:translateX(-300px) translateY(-300px) translate(-100px) rotate(30deg);}
			}
			
			
			#wrap {
				width: 750px;
				height: 500px;
				border: 1px solid black;
				margin: auto;
				position: relative;
			}
			#wrap>div {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			#wrap>#btn {
				position: absolute;
				right: 10px;
				bottom: 10px;
				z-index: 1;
				
			}
			#wrap>#btn>li {
				list-style: none;
				width: 20px;
				height: 20px;
				float: left;
				margin-left: 10px;
				border-radius: 10px;
				border: 2px solid black;
				background-color: red;
				box-sizing: border-box;
				opacity: 0.7;
				cursor: pointer;
			}
			#wrap>#btn>li:hover {
				background-color: greenyellow;
			}
			
			#wrap>.split{
				-webkit-animation: donghua 2s forwards;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul id="btn"></ul>
		</div>
		
		
		<script>
			$(function(){
				//图片数组
				const array = [
					'img/1.jpg',
					'img/2.jpg',
					'img/3.jpg',
					'img/5.jpg',
					'img/4.jpg'
				]
				//定义上一个图片的索引下标
				let pre = array.length - 1
				//定义碎片的长度和宽度
				const asize = 50
				//计算有多少行多少列
				const row = parseInt($('#wrap').height()/asize)
				const colume = parseInt($('#wrap').width()/asize)
				
				

				creatediv()
				
				//创建div
				function creatediv (){
					
					for(let i =0; i<5; i++)
					{
						const div = $('<div></div')
						div.css({
							'background':'url(' + array[i] +')'
						})
						$('#wrap').append(div)
						$('<li></li>').appendTo('#btn')
					}
					
				}
				
			//按钮点击事件	
			$('#wrap>#btn>li').click(function(){
				
				let index =$(this).index()
				//alert(index)
				
				$('#wrap>div').eq(index).fadeIn(1000).siblings('div').fadeOut(1000)
				split()
				function split(){
					$('#wrap>p').remove()
					for(let i=0; i<=row+colume-2; i++){
						//cosnt p = $('<p><p>')
						for(let x= Math.max(0,i-(row-1)); x<=Math.min(i,colume-1); x++){
							let y= i-x
							const p = $('<p></p>')
							p.css({
								'width': asize+'px',
								'height': asize + 'px',
								'background': 'url(' + array[pre] +')',
								'position': 'absolute',
								'top': (y*asize) +'px',
								'left': (x*asize) + 'px',
								'background-position': '-'+ (x*asize)+'px -'+(y*asize)+'px'
							})
							$('#wrap').append(p)
							setTimeout(function(){
								p.addClass('split')
							},i*20)
							
						}
						
					}
				}
		
				pre = index
			})
			
				
			})
		</script>
	</body>
</html>
碎片飞出效果--基于轮播基础--实训day02

猜你喜欢
