Question

我发现this post非常有帮助，这几乎是我想要实现的目标

问题是我想在页面上移动多个div，如何修改它以允许多个元素随机移动？

$(document).ready(function(){
animateDiv();

});

function makeNewPosition(){

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

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

return [nh,nw];    

}

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

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

};

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 = .8;

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

return speed;

}

在这个编写代码中，我创建了一个针对新类的新功能，但它绘制了相同的动作。

http://codepen.io/Alex/pen/OPPBmX

Answer 1

一种可能性是在函数中包含函数，并多次调用该函数。

你可以有一个包含所有div的附加div：

<div class="animatedDivs"></div>

然后在函数内部，您可以创建一个div，将其附加到该div，并为其设置动画：

function newDiv() {
    //Create
    var $div = $("<div class='a'>");

    //Append
    $(".animatedDivs").append($div);

    //Animate
    animateDiv();    

    function animateDiv(){
        //same code with $('.a') replaced by $div
    };

}

function makeNewPosition(){
    //same code
}

function calcSpeed(prev, next) {
    //same code
}

然后您可以根据需要创建任意数量：

$(document).ready(function () {
    newDiv();
    newDiv();
    //etc...
});

小提琴示例：http://jsfiddle.net/9agtb339/1/

Answer 2

你错了：

你动画＆＃34; .a＆＃34;在你的animateDivTwo函数中，似乎你想要目标＆＃34; .b＆＃34;这里
您在animateDiv功能
中致电animateDivTwo

所以，animateDivTwo只调用一次

我更正了您的codepen

Answer 3

请查看此JSFiddle。的更新

<div class='a' name="animate"></div> <div class='b' name="animate"></div> $(document).ready(function(){ $("div[name=animate]").each(function(){ animateDiv($(this)); }); }); function animateDiv(c){ var newq = makeNewPosition(); $(c).animate({ top: newq[0], left: newq[1] }, function(){ animateDiv(c); }); };

<强> CSS

div.a, div.b { width: 50px; height:50px; background-color:red; position:fixed; } div.b{ background-color:green; }

这只是一个开始的想法。

<强>更新

在以下更新的JSFiddle中，我创建了三个Div。所以这是添加任意数量的div的最佳方式。你所要做的就是添加css。事实上，我们也可以将其随机化。

Answer 4

我在您的代码笔页面上做了一些修改，并提出了一个我认为的解决方案：

我把所有的div都变成了同一个类。

http://codepen.io/anon/pen/NPPOXg

$(document).ready(function(){
    animateDiv();
    animateDivTwo();

});

function makeNewPosition(){

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

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

    return [nh,nw];    

}

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

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

};

function animateDivTwo(){
    var newq = makeNewPosition();
    var oldq = $('.a').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

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

};

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 = .4;

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

    return speed;

}

在页面jQuery JS中随机移动多个div

4 个答案: