CSS 在范围和增量内随机背景图像位置；变换时间随机数答案

【问题标题】：CSS Random background image position within range and increment; random number for transformation timingCSS 在范围和增量内随机背景图像位置；变换时间随机数
【发布时间】：2012-11-22 00:58:53
【问题描述】：

我正在制作一个 480x480 像素的精灵，其中 225 个单独的 32x32 像素图像布置在 15x15 网格中，因此它是一个完美的方形 jpeg。我正在尝试：

创建一种在背景位置字段中生成随机数的方法，该方法将在我指定的范围和增量内注入一个随机数（范围为 0-480，inc 为 32）。这是为了调用 div 的随机精灵背景图像。
生成一个类似的随机数（只是范围），用于 div 变换的计时：rotateY(180deg) 样式。这是为了让 div “翻转”并返回。我有一个已经在代码中工作的前/后转换，但当然时间是统一的。
找到一种方法来克隆或复制该 div 及其内容以填充包含的内容。

我一直在努力尝试制作类似的东西：

<div class="face back" style="
background-position-x: [myNumber]px;
background-position-y: [myNumber]px;
"></div>

使用如下脚本：

var myNumber = Math.floor((Math.random()*14)+1);
myNumber = myNumber *32;

我知道我根本没有采取正确的方式。

所需的结果是一个 div（可能是背景或页脚），其中包含数十个（可能数百个）32x32px 看似随机的图像。每一个都以不同的间隔过渡到不同的图像。显然我正在寻找任何优雅的方式。

【问题讨论】：

为了让我了解您在这里想要实现的目标：像照片墙这样的东西，由随机选择且行为随机的小图像组成？
@toxicate20 是的。我知道完成这项工作的唯一方法是设置数百个样式（或者您需要填充空间的任何数量。请记住，我可能会在页脚中使用它，因此它可能需要超过 2000 像素宽）的单个 css课程，每个课程都有单独的时间。从那里，用独特的背景位置在 html 中单独标记它们。不实用
主要问题是我找不到在样式表或 html 中以有用的方式使用任何随机数的方法。我需要它在 x 和 y 背景位置生成，以及另一个用于计时的单独随机函数。除此之外，我需要一些方法来不断复制重复 div，每次都重新计算这些动态测量值。

标签： javascript css html css-animations

【解决方案1】：

我不太确定您的意思，但我建议您采用以下程序：

获取对<div> 的引用，该引用应该用平铺的图像网格填充。
获取其宽度和高度，然后将这些值除以 (%) 平铺宽度加一：

var rect = div.getBoundingClientRect();

var numTiles = ( rect.width % tileWidth + 1 ) * ( rect.height % tileWidth + 1 );
创建numTiles 是<div> 元素并随机设置它们的背景位置：

var bgTop = Math.floor(Math.random() * numTilesInMap);

var bgLeft = Math.floor(Math.random() * numTilesInMap);
我会简单地将所有 div 元素浮动并将它们附加到容器中，因此容器应该有overflow : hidden，因为网格总是更大。

如果您想拥有唯一的随机数，并且只希望地图中可用的图像数量相同，那么您可以执行以下操作：

var randoms = {};
for( var i = 0; i < numImages.length; i++ ){
    randoms[i] = i;
};

var rand, index;
while( Object.keys( randoms ).length > 0 ){
    index = Math.round( Math.random() * ( Object.keys( randoms ).length - 1 ) );
    rand = randoms[ index ];

    //do something with the random number here

    delete randoms[ index ];
}

我没有对此进行测试，它应该只是建议如何生成随机唯一数字。也可以使用数组来完成，这可能更快。

您好……

编辑

我在这里忘记提及的是，在 »div« 解决方案旁边，您还可以创建一个 <canvas> 并使用带有随机值的 drawImage() 方法，您只需在画布上绘制平铺地图的区域只要是满的。这减少了 DOM 的大小，您可以创建与容器的确切大小相同的画布。如果您没有捕获任何导致 tilemap 区域或其他图像依赖参考的事件，这可能是最快的解决方案。

【讨论】：

在正确的轨道上。最后得到：var imageHeightWidth = 480; var tileHeightWidth = 32; function imageArray(imageSize, tileSize) { var imageTiles = (imageSize / tileSize); var imageTileArray = [0] for(i = 1; i < imageTiles; i++) { var tilePush = i * tileSize; imageTileArray.push(tilePush); } return(imageTileArray); } function randomTile(tileGen){ var arrayLength = tileGen.length; return(tileGen[Math.floor(Math.random()*arrayLength)]); } var imageTileArray = imageArray(imageHeightWidth, tileHeightWidth);

【解决方案2】：

procces= function() {
  TimeSpeed=100;
  startRange=1;
  stopRange=100;
  incrementRenge=5;
  setTimeout(function run(){
        if(startRange >=stopRange) {
          console.info("stop");
        }
        else {
          console.info("rinning");
          startRange+=Math.floor(Math.random()*incrementRenge);
          $(".face back").css({"background-position":startRange+"px ,"+startRange+"px"});
          setTimeout(function() {
            run()
          },TimeSpeed) 
        }
      },TimeSpeed)
}

【讨论】：