首页 > 编程语言> > javascript – 随机创建和定位元素超出浏览器窗口

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

2019-10-07 06:38:09 作者：互联网

使用JQuery我正在创建元素并将它们添加到正文中(我也尝试使用DIV并获得相同的结果),JQuery正在创建的新DIV远远超出了窗口(随机限制).

我几乎有一个空白的HTML页面,它为页面提供了JQuery和script.js.

我的屏幕分辨率是1920×1080,所以在我的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);
    });
});

解决方法:

你为什么要把位置设定为亲戚？

这是我做的一个.

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

标签：html,javascript,jquery,css,positioning
来源： https://codeday.me/bug/20191007/1865188.html