.appendTo圈内div

Question

我正在尝试开发一些作为更大项目的一部分，但不幸很早就停滞不前。

我试图让动态创建的div仅是#circle专区内，并将其限制在20

这里是一个codepen ...

'http://codepen.io/phillip_vale/pen/QENmMN?editors=1111' 

Answer 1

尝试是这样的

你需要测试，如果点在圈内

function makeDiv() { 

var divsize = Math.floor((Math.random() * 20) + 4); 
    var a = Math.random(); 

    $newdiv = $('<div class="test">').css({ 
    'width': divsize + 'px', 
    'height': divsize + 'px', 
    'opacity': a 
    }); 

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); 
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); 
if((posx-200)*(posx-200)+(posy-200)*(posy-200) < 200*200) { 

    $newdiv.css({ 
    'position': 'absolute', 
    'left': posx + 'px', 
    'top': posy + 'px', 
    'display': 'none' 
    }).appendTo('#circle').fadeIn(1000, function() { 
    makeDiv(); 
    console.log(posx, posy); 
    }); 
    return 1 
    } 
    return 0; 
} 
var x = 0 
while(x < 20) { 
    x = x+makeDiv(); 
    } 

http://codepen.io/anon/pen/RRRNoN?editors=1111

或本作的动画：

function makeDiv() { 

var divsize = Math.floor((Math.random() * 20) + 4); 
    var a = Math.random(); 

    $newdiv = $('<div class="test">').css({ 
    'width': divsize + 'px', 
    'height': divsize + 'px', 
    'opacity': a 
    }); 

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); 
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); 
if((posx-200)*(posx-200)+(posy-200)*(posy-200) < 170*170) { 

    $newdiv.css({ 
    'position': 'absolute', 
    'left': posx + 'px', 
    'top': posy + 'px', 
    'display': 'none' 
    }); 
    return $newdiv 
    } 
    return 0; 
} 
var x = 0 
while(x < 20) { 
var div = makeDiv(); 
if(div !=0) { 
    x = x+1; 
    div.appendTo('#circle').delay(1000*x).fadeIn(1000); 
    } 
    } 

http://codepen.io/anon/pen/vKKEJO?editors=1111

更多info