.appendTo内圆div

Question

我正在尝试开发一些东西，作为更大项目的一部分，但不幸的是很早就卡住了。

我试图让动态创建的div只在#circle div中，并将它们限制在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