随机位置照片墙

原创已于 2025-01-25 14:24:05 修改

· 949 阅读

1 ·

版权

文章标签：

#html #前端 #javascript

于 2022-07-18 21:04:30 首次发布

本文介绍如何使用JavaScript和CSS3创建一个动态的随机照片墙，通过JavaScript控制图片的位置和旋转，点击切换显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码示例自己插入图片即可

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>js+css3随机排列照片墙展示特效</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		#ul {
			position: relative;
		}

		#ul li {
			vertical-align: top;
			box-shadow: 0 0 5px #696969;
			position: absolute;
			transition: all 1s;
		}

		#ul li.checked {
			left: 50% !important;
			top: 300px !important;
			transform: rotate(0deg) translate(-50%, -50%) scale(1.5, 1.5) !important;
			z-index: 99 !important;
		}
	</style>
</head>

<body>
	<ul id="ul"></ul>
	<script type="text/javascript">
		window.addEventListener('load', function () {
			//获取事件源
			var ul = document.getElementById('ul');
			//获取图片可活动区域
			var windowW = document.documentElement.clientWidth - 340;
			var windowH = document.documentElement.clientHeight - 191;
			//循环遍历
			for (var i = 0; i < 10; i++) {
				//创建li标签
				var li = document.createElement('li');
				//追加到ul的子元素
				ul.appendChild(li);
				//创建img标签
				var img = document.createElement('img');
				li.appendChild(img);
				// 动态插入图片
				img.setAttribute('src', 'img/' + i + '.jpg');
			}
			//获取所有的li
			var allLi = ul.children;
			//遍历
			for (var j = 0; j < allLi.length; j++) {
				//取出单个li
				var li = allLi[j];
				//随机获取位置
				li.style.left = parseInt(Math.random() * windowW) + 'px';
				li.style.top = parseInt(Math.random() * windowH) + 'px';
				//获取随机角度
				li.style.transform = 'rotate(' + Math.random() * 360 + 'deg)';
				//监听点击事件
				li.addEventListener('click', function () {
					for (var i = 0; i < allLi.length; i++) {
						allLi[i].className = '';
					}
					this.className = 'checked';
				});
			}
		})
	</script>
</body>

</html>