gpt4 book ai didi

javascript - 在框内随机显示圆圈

转载 作者:行者123 更新时间:2023-11-30 12:43:03 25 4
gpt4 key购买 nike

我需要在一个框内随机显示几个圆圈。这些圆圈不应位于框外,甚至不应触及框 Angular 。有没有办法用相对值(百分比)绘制 div 内的所有圆圈?例如,我想说:将这个圆圈绘制在距离框左侧 10% 和距离框顶部 40% 的位置。位置应该相对于盒子。目前,百分比值是根据整个页面选择的,而不仅仅是 div(框)。

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="triangle.css">

<body align = "center">

<div id='area' align = "center"
style="width:90vw; height:40vw; border: 2px solid; margin-top:2%; margin-left:auto; margin-right:auto;">
</div>

Javascript 函数:

for(var i=0; i<10;i++){
Left = Math.floor(Math.random() * 80)+10;
Top = Math.floor(Math.random() * 20) +5;
$("#area").append("<div class='circle-blue' + id=" + i + "></div>");
$("#" +i).css({"position":"absolute","top": Top + "%", "left": Left + "%"});
};

这是 fiddle :

http://jsfiddle.net/p6NE3/13/

最佳答案

将以下内容添加到您的 CSS:

Demo Fiddle

#area{
position:relative;
}

您需要为 #area 设置 position:relative,这样圆圈就有一个标记作为其定位的相对

关于javascript - 在框内随机显示圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23682830/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com