我使用 JQuery 创建元素并将它们添加到正文中（我也尝试使用 DIV 并获得相同的结果），JQuery 正在创建的新 DIV 的位置远远超出了窗口（随机限制）。
我几乎有一个空白的 HTML 页面，它引入了 JQuery 和该页面的 script.js。
我的屏幕分辨率是 1920x1080，所以在我的 JQuery 中，我使用这些限制来随机化顶部和左侧的值来定位块；我还使用了轮换，但没有任何问题。但是，当它放置所有块时，X 轴块远离我的屏幕（几乎是屏幕宽度的两倍），并且 Y 轴块也有一些超出屏幕底部（我希望这些块位于边缘被切断，但不是完全离开视图；事实上，我在计算结束时有 -20 以在顶部和左侧创建切断）
这是 HTML 页面（非常空（但我在这里放了一些 CSS）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Tickets</title>
<style>
.ticket{
position: relative !important;
background: #F90;
float: left;
padding: 7px 3px;
margin: 0 5px 5px 0;
}
</style>
</head>
<body>
</body>
</html>
然后在 JQuery 中我有创建块的代码：
// JavaScript Document
$(function(){
var ticket="<div class='ticket'><p>Random<br />Box</p></div>";
var numTickets=100;
for(var x=1;x<=numTickets;x++){
$(ticket).appendTo("body");
}
$(".ticket").each(function(i){
var posx = Math.round(Math.random() * 1920)-20;
var posy = Math.round(Math.random() * 1080)-20;
var rotationNum=Math.round((Math.random()*360)+1);
var rotation="rotate("+rotationNum+"deg)";
$(this).css("top", posy + "px").css("left", posx + "px").css("transform",rotation).css("-ms-transform",rotation).css("-webkit-transform",rotation);
});
});
