Question

Using the code submitted here，我怎么能在预定义的div范围内做类似的（如果不是相同的）事情呢？

提供的代码2pha具有渲染这些对象的位置的宽度和高度的变量，但是我不确定如何实际定位＆＃34;框＆＃34;它正在渲染它们。

值得注意的是，我是一个极端的初学者，所以如果这是一个愚蠢的问题，请原谅我。

非常感谢：）

Answer 1

在代码中，您将查看整个窗口的宽度和高度，并将其用作所有随机框的边界：

var ww = $(window).width();
var wh = $(window).height();

相反，如果您想要将所有随机框放在另一个div内（我给它标识container），您可以只读取该框的宽度和高度。

var ww = $("#container").width();
var wh = $("#container").height();

您还希望将随机框附加到容器div中而不是body。

for(var x=1;x<=numTickets;x++){
    $(ticket).appendTo("#container");
}

这是一个演示：

＆＃13;

var ticket="<div class='ticket'><p>Random<br />Box</p></div>";
    var numTickets=10;
    for(var x=1;x<=numTickets;x++){
        $(ticket).appendTo("#container");
    }
    // get container dimentions
    var ww = $("#container").width();
    var wh = $("#container").height();
    $(".ticket").each(function(i){
        var rotationNum=Math.round((Math.random()*360)+1);
        var rotation="rotate("+rotationNum+"deg)";
        var posx = Math.round(Math.random() * ww)-20;
        var posy = Math.round(Math.random() * wh)-20;
        $(this).css("top", posy + "px").css("left", posx + "px").css("transform",rotation).css("-ms-transform",rotation).css("-webkit-transform",rotation);
    });

＆＃13;

.ticket{
    position: absolute;
     background: #F90;
     padding: 7px 3px;
 }

#container{
    width:400px;
    height:400px;
    border:1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    
</div>

＆＃13;

在div中随机创建和定位元素

1 个答案: