js实现图片的飞入样式换图

最新推荐文章于 2023-02-07 10:28:14 发布

Godfiry

最新推荐文章于 2023-02-07 10:28:14 发布

阅读量896

点赞数

分类专栏：前端文章标签： js css html css3

本文链接：https://blog.csdn.net/qq_44004011/article/details/113245611

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js"></script>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			/*设置css动画效果 让每张小图大下1->0.5*/
			@keyframes donghua{
				from
				{
					transform: scale(1);
					opacity: 1;
				}
				to
				{
					transform: scale(0.5);
					opacity: 0;
				}
			}
			/*应用上面的动画 下方通过添加这个类实现图片缩放效果*/
			.split
			{
				animation: donghua 1s forwards;
			}
			
			#app
			{
				
				width: 750px;/*大小为每张图片的大小*/
				height: 500px;
				border: 1px solid #000000;
				position: absolute;
				left: calc((100% - 750px)/2);/*注意calc函数里面的参数*/
				top:calc((100vh - 500px)/2);
				position: absolute;
			}
			
			#app>div
			{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			/*下方五个按钮的样式*/
			 #app>.btn
			 {
                position: absolute;
				right: 10px;
				bottom: 10px;
				z-index: 2;
			 }
			
			#app>.btn>li
			{
				width: 20px;
				height: 20px;
				background: #000000;
				border: 1px solid #FFFFFF;
				border-radius: 10px;
				float: left;
				opacity: 0.5;
				list-style: none;
				margin: 0 5px;
				box-sizing: border-box;
			}
			
			#app>.btn>li:hover
			{
				background: #FFFFFF;
				border: 1px solid #000000;
			}
			
			/*小图的位置 */
			#app p
			{
				position: absolute;
				background: #000000;
			}
			
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script>
			$(function(){
				/*将图片和按钮显示出来*/
				const image = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
				let num = image.length;//不是函数 
				const side = 50/*小图的大小*/
				//每行放的照片数量 15 每列放10个
				const row_conunt = 500/50 
				const column_count = 750/50 //y大
				
				const app = $('#app')//方便元素添加
				const ul = $('<ul class="btn"></ul>')
				
				//放置大图 创建五个div 设定每个div的背景图
				for(i = 0;i < num;i++)
				{	
					$('<div></div>').css({
						
					    background: 'url(' + image[i] + ')',
						'background-size':'750px 500px',
						
					}).appendTo(app)
					
					$('<li></li>').appendTo(ul)
					
				}
				
				ul.appendTo(app)
				/*以上为显示图片部分*/
				
				//点击按钮之后
				$('#app li').click(function(){
					
					//每次换新图片之前清除原来新生成的p标签 达到一定数量程序会崩
					$('#app>p').remove()
					
					/*点击按钮之后 切换图片*/
					const index = $(this).index();
					
					if(index !== num)//判断点击的index 和当前显示num是否相同 如果相同 不改变（不出现小方块）
					{
						$('#app div').eq(index).fadeIn() .siblings('div').fadeOut()
						
						/*切换照片的时候要有效果 飞入 先切成小块 之后再进行一个个淡入消失*/
						//每个照片大小为50*50
						
						
						/*计算一下每个照片的位置*/
						//开始位置的索引
						let startx = 0//注意是变量
						let starty = 0
						//结束位置的索引（x y 坐标二位数组形式）
						let endx = row_conunt - 1//x值较小
						let endy = column_count - 1//y值较大
						//摆放图片的索引
						let x = 0
						let y = 0
						
						for(i= 0; i<row_conunt * column_count;i++)
						{
							const p = $('<p></p>').css({
								width: side + 'px',/*长宽设置为50px*/
								height: side + 'px',
								background: 'url(' + image[num] + ')',/*刚开始是第0张小图 i++换下一张小图*/
								'background-position': (y * side * -1) + 'px ' + (x * side * -1) + 'px',/*小图显示的区域 默认都为左上区域 0 0*/
								top: (side * x) + 'px',/*刚开始没有位置变化 第1个后改变位置*/
								left : (side * y) + 'px'/*小图放置的位置 参照app的绝对定位*/
							})
							p.appendTo(app)
							/*延时动画效果 每个小方块慢慢消失*/
							setTimeout(function(){
								p.addClass('split')//最上面写了css的动画效果
							},50 * i)
							
							if(x === startx && y < endy)//转一圈
							{
								y++
							}else if(y === endy && x < endx)
							{
								x++
							}else if(x === endx && y > starty)
							{
								y--
							}else if(y === starty && x > startx)
							{
								x--
							}
							
							if(y === starty && x === startx + 1)//切换到内行
							{
								startx++
								starty++
								endx--
								endy--
							}
						}
						
						num = index/*总是显示最后一张 当点击之后切换为点击的index图片*/
					}
				})
				
				
				
				
			})
		</script>
	</body>
</html>

Godfiry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现图片的飞入样式换图

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.min.js"></script> <style> *{ margin: 0px; padding: 0px; } /*设置css动画效果让每张小图大下1
复制链接

扫一扫