div内产生位置随机的图片

最新推荐文章于 2023-07-15 15:06:46 发布

原创最新推荐文章于 2023-07-15 15:06:46 发布 · 4.4k 阅读

2 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

11 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现方案，用于随机放置多个图片到一个固定大小的div容器中。该示例使用jQuery来简化DOM操作，通过随机生成坐标位置来达到图片随机分布的效果，并为每个图片添加了点击事件。

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

本来想模拟一个扫雷的（只画样子，不实现功能），感觉太简单了。只要不停的向div内追加img标签就可以了。所以想弄麻烦点。

效果图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<meta charset="utf-8"/>
		<style type="text/css">
			*{margin:0;padding:0}
			#asj{
				width:550px;
				height:380px;
				margin:0 auto;
			}
			#content{
				width:550px;
				height:380px;
				border:1px solid red;
				position:fixed;
			}
		</style>
		<script src="./JS/jQuery-1.7.1.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				init();// 页面加载时开始在div上随机“画”图片
			});
			// 函数：初始化函数。
			function init(){
				// 页面图片的总数
				for(var i=1;i<=50;i++){
					// 通过getNum函数获取图片xy轴的坐标。
					var x=getNum(500),y=getNum(330);
					// 追加到div容器中。
					$("<img/>",{"id":"img"+i,"src":"black.gif"}).appendTo("#content").click(function(){
						alert("hello world");
					}).css({"top":y,"left":x,"position":"absolute"});
				}
			};
			// 函数：主动创建符合要求的整数，并返回。
			function getNum(limit){
				var num;
				while(true){
					num=Math.random()*1000;
					if(num<=limit&&num>0){
						break;
					}
				}
				return parseInt(num);
			};
		</script>
	</head>
	<body>
		<div id="asj">
			<div id="content">
				
			</div>
		</div>
	</body>
</html>