如何使用 jQuery 制作 10000 个 div 的屏幕数组？

Question

我是 jQuery 的初学者，我想制作一个自运行的屏幕显示只是为了好玩。

在 .container 中，我需要一个相对定位的 div 类 .Canvas（不是 HTML5）1000 像素 x 1000 像素，其中包含 10 像素 x 10 像素的绝对定位 div。所以整个东西是一个 10x10 正方形的直线网格。 我知道它需要有 100 个 y 坐标和 100 个 x 坐标。

我知道我可以创建一个“for”函数来迭代 10000 次 document.write(''); 当 h 从 = 0 变为

我想知道如何使用 jQuery 即时生成所有这些小虫子。

我还想为所有 div 赋予相同的 1000px x 1000px 背景 img，但每个偏移量以 10px 为增量，这样如果所有的分区都是不透明的，那么查看者会将整个 img 视为一个无缝实体，然后随着每个随机选择的 10x10 div 和定时延迟下降到 opacity=0，越来越多的“洞”出现在其中，直到它完全瓦解并在下面的 z-index 上显示一个完全不同的 img。

为这些小傻瓜指定背​​景位置的优雅方式是什么？ 是否有一些捷径可以通过使用 'child' 、枚举子编号或编写 CSS？

我知道这是很多东西，但也许有人会觉得给我一些提示很有趣.. ??

非常感谢！

迈克在洛杉矶。一个老屁，63 岁才学这些新花样。

Answer 1

我没有可以使用的精灵，但我使用随机的十六进制值进行了操作。如果您想查看、剖析和消化，然后有问题回复我，我很乐意提供帮助。

http://jsfiddle.net/8HyYt/

编辑 1

我按照您的要求制作了 10000 画布，但它使 Firefox 的内存过载，并且可能会破坏大多数计算机。但这是我的一个示例缺陷，而不是你的。我也明白我的问题对于情况的复杂性还不够前卫。使用精灵我会正常应用它，例如：

#canvas div{
  background-image:url('path/to/my/sprite.png');
}

然后，对于找到的每个 div，我们可以随机化我们在迭代器中引用的位置。

var tenbyten = $(".tenbyten");
$.each(tenbyten, function(index,value){
  //accepting negative and positive values, working with a range of 1000, or -1000
  //and incrementing on values of 10, we have two randoms
  //one for the top position and one for the left position.
  var randomTop = Math.floor(Math.random()*100)*10 - 500;
  var randomLeft = Math.floor(Math.random()*100)*10 - 500;
  //for every element with a class of tenbyten found
  //we give it a random background within our sprite.
  $(this).css({"background-position" : randomTop+"px "+randomLeft+"px" });
});

编辑 2

对于上面的示例，我使用了“1000px”而不是“10000px”。如果你需要 10000px，那么你需要改变数学：

Math.floor(Math.random()*1000)*10 - 5000;

这会给你正确的价值。