随机创建和定位元素超过浏览器窗口 [英] Randomly creating and positioning elements exceeds browser window
问题描述
使用JQuery我创建元素并将它们添加到正文（我也尝试使用DIV并获得相同的结果），JQuery创建的新DIV正被定位远远超过窗口（随机限制）。
Using JQuery I am creating elements and adding them to the body (I've also tried using a DIV and get the same results), the new DIVs that JQuery is creating are being positioned well beyond the window (randomized limits).
我几乎有一个空白的HTML页面，拉入JQuery和页面的script.js。
I pretty much have a blank HTML page, that pulls in JQuery and the script.js for the page.
我的屏幕分辨率是1920x1080，所以在我的JQuery我使用这些限制随机化的顶部和左侧的值来定位块;我也使用旋转，我没有任何问题。但是当它放置所有的块，X轴块是我的屏幕（几乎双我的屏幕宽度），Y轴块有一个超过屏幕的底部（我希望有那些在边缘切除，但不是所有的视图;事实上，我在计算结束时，在顶部和左侧创建cutt）
My screen resolution is 1920x1080, so in my JQuery I used those limits to randomize the top and left values to position the blocks; I also use a rotation which I'm not haveing any issues with. But when it places all the blocks, the X-axis blocks are WAY off my screen (almost double my screen width) and the Y-axis blocks have a handful that exceed the bottom of the screen too (I expect to have those on the edge cut off, but not all the way off the view; in fact I have -20 at the end of the calculations to create cutt offs on the top and left sides)
这是HTML页面（非常空（但我在这里放了一些CSS）：
Here's the HTML page (very empty (but I put some CSS in here):
<!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我有这个代码创建块：
Then in JQuery I have this code that creates the blocks:
// 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);
});
});
推荐答案
为什么要将position设置为relative？
Why are you setting position to relative?
这是我做的一个。
.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);
});
});
这篇关于随机创建和定位元素超过浏览器窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
