.appendTo 内圈 div答案

【问题标题】：.appendTo inside circle div.appendTo 内圈 div
【发布时间】：2016-10-16 00:36:26
【问题描述】：

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

我试图让动态创建的 div 仅在 #circle div 内并将它们限制为 20。

这是一个代码笔...

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

【问题讨论】：

你需要在问题中分享代码
你需要测试点是否在圆圈内
检查codepen.io/anon/pen/xOObEm 只剩下div 是一个正方形，我们应用了半径。我更改了#circle 位置relative 并更改了left
这个问题很可能在目前的情况下关闭，因为它不包含实际帖子中的代码。请在问题中编辑三个代码块（它们下面的 codepen.io 链接也可以）。

标签： jquery dynamic append

【解决方案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

【讨论】：