Question

我正在使用这个简单的脚本，它会在页面上随机放置一个带有.random类的图像 - 效果很好。试图找出一种方法将它应用于页面上的多个图像使用单个类，以便图像分散在页面上 - 现在如果它应用于多个图像，它们都使用相同的随机定位。

        $( document ).ready(function() {
          var bodyWidth = document.body.clientWidth
          var bodyHeight = document.body.clientHeight;
          var randPosX = Math.floor((Math.random()*bodyWidth));
          var randPosY = Math.floor((Math.random()*bodyHeight));

          $('.random').css('left', randPosX);
          $('.random').css('top', randPosY);

        });

Answer 1

你可以试试这个：

＆＃13;

$(document).ready(function() {
  var bodyWidth = document.body.clientWidth
  var bodyHeight = document.body.clientHeight;

  $('.random').each(function(idx, img) {
    var randPosX = Math.floor((Math.random() * bodyWidth));
    var randPosY = Math.floor((Math.random() * bodyHeight));
    console.log(randPosY);
    $(img).css('left', randPosX);
    $(img).css('top', randPosY);

  });
});

＆＃13;

body {
  height: 500px;
}
.random {
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<img class="random" src="http://lorempixel.com/200/200/">
<img class="random" src="http://lorempixel.com/200/200/">
<img class="random" src="http://lorempixel.com/200/200/">
<img class="random" src="http://lorempixel.com/200/200/">
<img class="random" src="http://lorempixel.com/200/200/">

＆＃13;

Answer 2

您可以使用jQuery each来迭代选择器匹配。例如：

$(document).ready(function() {
    var bodyWidth = document.body.clientWidth
    var bodyHeight = document.body.clientHeight;
    $('.random').each(function() {
        var randPosX = Math.floor((Math.random() * bodyWidth));
        var randPosY = Math.floor((Math.random() * bodyHeight));
        $(this).css('left', randPosX);
        $(this).css('top', randPosY);
        posLog.innerHTML = posXY
    });
});

随机位置多个图像

2 个答案: