随机创建和定位元素超出浏览器窗口答案

【问题标题】：Randomly creating and positioning elements exceeds browser window随机创建和定位元素超出浏览器窗口
【发布时间】：2014-03-27 00:20:31
【问题描述】：

使用 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);
    });
});

【问题讨论】：

仅供参考，您不需要多次调用.css()，您可以将所有设置放在一个对象参数中并调用一次。
也许你应该把 float:left out 从样式中去掉。
@Barmar，谢谢，一旦我得到它的工作，我会简化它。
@Nilesh 这是在完整应用程序中获得正确大小的“票”所必需的；没有它，块会扩展整个宽度。（但我确实尝试过，然后记得为什么它在那里）
尝试更改为position: absolute。

标签： javascript jquery html css positioning

【解决方案1】：

为什么将位置设置为相对？

这是我做的。

http://jsfiddle.net/29M54/

.ticket{
    position: absolute;
     background: #F90;
     padding: 7px 3px;
 }

$(document).ready(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");
    }
    // get window dimentions
    var ww = $(window).width();
    var wh = $(window).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);
    });
});

【讨论】：

问题依然存在。实际上，页面向右和向下滚动。如何防止这种行为，使右侧的旋转 div 成为顶部的主干？

【解决方案2】：

我使用这种 css 样式来解决同样的问题：

$(this).css({
  "position":"absolute",
  "left":"'+posx +'px",
  "top":"'+posy +'px",
  "padding":"5px",
  "transform":"'+ rotation +'",
  "-ms-transform":"'+ rotation +'",
  "-webkit-transform":"'+ rotation +'"
});

另外，你可以使用这样的东西：

$(function(){

var numTickets=100;
    for(var x=1;x<=numTickets;x++){
    var posx = Math.round(Math.random() * 1920)-20;
    var posy = Math.round(Math.random() * 1080)-20;
    var ticket="<div class='ticket' style='position:absolute;left:'+posy+';top:'+posx+';'><p>Random<br />Box</p></div>";
    $(ticket).appendTo("body");
    }

});

【讨论】：