在页面加载时随机定位 div

Question

我想要一组 div 在页面加载时随机定位。 div 当前设置为以随机方式在视口中移动，但似乎都加载到左上角。

我目前的方法： (https://jsfiddle.net/j2PAb/634/)

$(document).ready(function() {
    animateDiv($('.a'));
    animateDiv($('.b'));
    animateDiv($('.c'));});

function makeNewPosition($container) {

// Get viewport dimensions (remove the dimension of the div)
var h = $container.height() - 50;
var w = $container.width() - 50;

var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);

return [nh, nw];}


function animateDiv($target) {
var newq = makeNewPosition($target.parent());
var oldq = $target.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);

$target.animate({
    top: newq[0],
    left: newq[1]
}, speed, function() {
    animateDiv($target);
});

};

function calcSpeed(prev, next) {

var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);

var greatest = x > y ? x : y;

var speedModifier = .1;

var speed = Math.ceil(greatest / speedModifier);

return speed;}

Answer 1

只需定义它们的初始 top 和 left 位置，例如 this

div.a {
width: 50px;
height:50px;
 background-color:red;
position:fixed;
    top: 300px;
    left:10px;
}
div.b {
width: 50px;
height:50px;
 background-color:blue;
position:fixed;
    top: 100px;
    left:50px;
}
div.c {
width: 50px;
height:50px;
 background-color:green;
position:fixed;
    top: 150px;
    left:200px;

}

Answer 2

在为它们设置动画之前，将随机值设置到这些 div 的顶部和左侧。

如下所示...

function randomstart($target) {
    var newq = makeNewPosition($target.parent());
    $target.css({top:  newq[0], left: newq[1]});

};

检查updated fiddle。

Answer 3

添加一个初始化方法来设置每个div的位置。

类似于：

function initDiv(target) {
  var newq = makeNewPosition(target.parent());
  target.css({top:  newq[0], left: newq[1]});
  animateDiv(target.show());
}

最初还要隐藏 divs，这样移动就不会被用户注意到：

div.a, div.b, div.c {
  display: none;
}

所以更新后的代码看起来像 (fiddle) :

$(document).ready(function() {
  initDiv($('.a'));
  initDiv($('.b'));
  initDiv($('.c'));


});

function initDiv(target) {
  var newq = makeNewPosition(target.parent());
  target.css({
    top: newq[0],
    left: newq[1]
  });
  animateDiv(target.show());
}

function makeNewPosition($container) {

  // Get viewport dimensions (remove the dimension of the div)
  var h = $container.height() - 50;
  var w = $container.width() - 50;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh, nw];

}

function animateDiv($target) {
  var newq = makeNewPosition($target.parent());
  var oldq = $target.offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);

  $target.animate({
    top: newq[0],
    left: newq[1]
  }, speed, function() {
    animateDiv($target);
  });

};

function calcSpeed(prev, next) {

  var x = Math.abs(prev[1] - next[1]);
  var y = Math.abs(prev[0] - next[0]);

  var greatest = x > y ? x : y;

  var speedModifier = .1;

  var speed = Math.ceil(greatest / speedModifier);

  return speed;

}

div#container {
  height: 500px;
  width: 500px;
}
div.a,
div.b,
div.c {
  display: none;
}
div.a {
  width: 50px;
  height: 50px;
  background-color: red;
  position: fixed;
}
div.b {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: fixed;
}
div.c {
  width: 50px;
  height: 50px;
  background-color: green;
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class='a'></div>
  <div class='b'></div>
  <div class='c'></div>
</div>

在页面加载时随机定位 div

Randomly position divs upon page load

javascript

css

jquery

position

positioning