html + css + jquery 照片墙

最新推荐文章于 2024-07-27 23:01:21 发布

~哦~豁~

最新推荐文章于 2024-07-27 23:01:21 发布

阅读量798

点赞数

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

本文链接：https://blog.csdn.net/ziao890122/article/details/109239198

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html + css + jquery 动态照片墙实现

需求：

将指定的照片放到照片墙
点击选中照片墙中的照片，照片墙显示选中照片的放大图片
点击照片墙的放大照片，照片墙还原成多个小图

照片墙小图模式

在这里插入图片描述

照片墙大图模式

在这里插入图片描述

实现代码

<!DOCTYPE html>

<html>
	<head>
		<!-- 引入JQuery -->
		<script src="./js/jquery3.5.1.js"></script>
		<style>
			/* 清除所有样式内外边距 */
			*{
				margin:0;
				padding:0;
			}
			/* 设置html页面背景色为黑色 */
			html{
				background: #000000;
			}
			/* 设置放置照片的墙样式 */
			#warp{
				width:90%;
				height:90vh;
				position:absolute;
				top:5%;
				left:5%;
				border: #D95AE2 solid 5px;
				border-radius: 10px;
			}
			/* 设置照片的样式 */
			#warp>div{
				position:absolute;
				transition: 1s;
			}
		</style>
	</head>
	<body>
		<div id = "warp"></div>
		<script>
			$(function(){
				// 设置大照片的宽和高
				const big_width = 700 
				const big_height = 500 
				// 设置小图片的宽和高
				const small_width = big_width/3
				const small_height = big_height/3
				//定义一个标签，用来展开或者合并照片
				let isOpen;
				 // 调用方法，创建div元素
				create_div()
				//调用方法，展开放置照片到照片墙
				open();
				
				function create_div(){
					// 总共放置9张照片，3*3
					for(let i = 0; i < 9; i++){
						//创建 div 虚拟 document,并设置样式
						const div = $('<div></div>').css({
							'width': small_width + 'px',
							'height': small_height + 'px'
						})
						//将 创建的虚拟 document 追加到 id = "warp" 的元素之后
						div.appendTo($('#warp'))
					}
					
				}
				// 将照片展开防止到照片墙
				function open(){
					for (let i = 0; i < $('#warp>div').length; i++) {
						//计算当前照片在照片墙的行索引和列索引
						const row = parseInt(i / 3);
						const column = i % 3;
						// 计算照片的行间距和列间距
						const row_span = ($('#warp').height() - big_height)/4;
						const column_span = ($('#warp').width() - big_width)/4;
						// 计算当前照片的距左和上的距离
						const left = (column+1) * column_span + column * small_width;
						const top = (row + 1) * row_span + row * small_height;
						// 设置照片的偏转角度
						const r = Math.random()*20 - 10;
						// 设置照片展开的样式和属性
						$('#warp>div').eq(i).css({						
							'background': 'url(./images/' + (i+1) + '.jpg)',
							'background-size': small_width + 'px ' + small_height + 'px',
							'left': left + 'px',
							'top': top + 'px',
							'transform': 'scale(0.8) rotate(' + r + 'deg)',
							'box-shadow': '1px 1px 20px #ff0ffb',
							'border-radius': '5px'
						});
						// 将标签设置为真
						isOpen = true;
					}					
				}
				
				function close(index){
						// 点击的是第几个div就要把所有的div背景图都变成点击的那个
						for(let i = 0; i < $('#warp>div').length; i++) {
							// 计算行索引和列索引
							const row = parseInt(i / 3);
							const column = i % 3;
							//计算合并后的左间隔
							const left_span = ($('#warp').width() - big_width) / 2;
							//计算合并后的上间隔
							const top_span = ($('#warp').height() - big_height) / 2;
							// 重新计算小图的top和left
							const top = top_span + row * small_height;
							const left = left_span + column * small_width;
							// 设置照片合并的样式和属性
							$('#warp>div').eq(i).css({
								'background':'url(./images/' + (index + 1) + '.jpg)',
								'transform':'scale(1) rotate(0deg)',
								'box-shadow':'0 0 0 0',
								'border-radius': '0',
								'background-position': '-' + (column * small_width) + 'px -' + (row * small_height) + 'px',
								'top': top + 'px',
								'left': left + 'px'
							});
							// 将标签设置为假
							isOpen = false;
						}
						
				}
				// 绑定点击事件
				$('#warp>div').click(function(){
					const index = $(this).index();
					// 如果展开，调用关闭刚发，如果关闭，调用展开方法
					isOpen ? close(index) : open();
				})
				
			})
			
		</script>
	</body>
</html>