Question

查看this问题我能够随机移动屏幕上的2个div。查看包含图片的两个div的CSS：

div.a {
 z-index: -101;
 width: 95px;
 height:95px;
 position:fixed;
 top: 100px;
 left: 0px;  
 text-align: center;
}

div.b {
 z-index: -102;
 width: 100px;
 height:100px;
 position:fixed;
 top: 300px;
 right: 0px;  
 text-align: center;
}

div.a img, div.b img { 
 animation-name: giro;
 animation-duration: 10000ms;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
}

正如您所看到的，他们是2个带有a和b类的div，而且里面只包含一张图片（使用标签img）。使用最后一块CSS，picutre永远在div内旋转。

div也会移动（与图片一起），但是他随着下面的jQuery代码移动：

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

  function makeNewPosition($container) {

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

    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;

   //speed of porco dio moving around
   var speedModifier = 0.03;

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

上面的代码与您在我链接的问题中找到的代码相同。唯一的区别是speedModifier（从1到0.03）和两个$(window).height()和$(window).width()，因为我需要div在整个屏幕上移动。

问题

我链接的问题中的小提琴工作正常，而且div在随机位置永远移动。在我的情况下（使用我的代码）div在整个屏幕中随机移动了一段时间，但是它们卡在屏幕的一个点上，它们不再移动了。

是不是因为我设置了一个太小的speedModifier？

FIDDLE OF MY CODE

jQuery在屏幕上移动div

0 个答案: