Question

我希望在页面加载时随机定位一组div。 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]});

};

检查https://michlg.wordpress.com/2010/01/17/listbox-automatically-scroll-to-bottom/。

Answer 3

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

类似的东西：

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

最初也要隐藏div，因此用户不会注意到移动：

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

所以更新的代码看起来像（fiddle）：

＆＃13;

$(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;

}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

在页面加载时随机定位div

3 个答案: