div内产生位置随机的图片

来源：互联网发布：淘宝1.1模型枪店铺编辑：程序博客网时间：2024/04/28 13:00

本来想模拟一个扫雷的（只画样子，不实现功能），感觉太简单了。只要不停的向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>