Question

好的，我已经看到了一些有点 *回答我的问题的事情，但他们都没有做我想做的事情/我想了解如何自己做从头到尾作为学习练习。我是这样的新手，所以忍受我吧！

我正在尝试做什么： 我有一个黑页，我想在页面上的随机位置上放置20到30个小的白色div框（就像星星有点像我想要的氛围）。

理想情况下，它们不会重叠，它们会在5px和10px之间随机调整大小，但我知道这可能会有点过于复杂。

这是我到目前为止的内容

我一直在this jsfiddle以及this one工作。这就是我想出来的（这不起作用，它们都以相同的间距排成一行并且不会局限于网站）

这是我的jsfiddle，代码

 function randomPosition() {
    var h = $(window).height()-10;
    var w = $(window).width()-10;

    var newHeight = Math.floor(Math.random() * h);
    var newWidth = Math.floor(Math.random() * w);

    return [newHeight, newWidth];
}

$(document).ready(function() {
    var newPosition = randomPosition();
    $('.star').css( {
        'margin-left':newPosition[1]+'px',
        'margin-top':newPosition[0]+'px'
    }).each(function(index) { $(this).delay(1500*index).fadeIn('slow');
                            })
});

CSS

body {
background-color: black;
}

.star {
height: 10px;
width: 10px;
background-color: white;
display: none;
}

HTML （有没有办法只使用for循环或类似的东西？）

<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"></div>

Answer 1

尺寸和定位并不太难。事情是在每个循环中完成所有操作 - 目前您获得1个位置并将其用于所有内容。此外，您还需要让他们position:absolute，以免他们离开页面。

我已经更新了你的小提琴来设置随机位置和5到10px之间的大小：

重叠有点困难。您需要跟踪生成的大小和位置，并在同一.each函数中将当前生成的大小+位置与之前生成的大小+位置进行比较以检查重叠。

http://jsfiddle.net/5ocb5aww/3/

function randomPosition() {
    var h = $(window).height()-10;
    var w = $(window).width()-10;

    var newHeight = Math.floor(Math.random() * h);
    var newWidth = Math.floor(Math.random() * w);

    return [newHeight, newWidth];
}

function randomSize() {
    return Math.round(Math.random() * 5) + 5;
}

$(document).ready(function() {
    // stores generated star positions
    var stars = [];
    $('.star').each(function(index) {
        var newPosition, newSize;

        // check for overlap
        var isOverlap = true;
        while(isOverlap)
        {
            newPosition = randomPosition();
            newSize = randomSize();
            // check previous stars to see if an edge of this one overlaps
            isOverlap = $.grep(stars, function(s) {
                return (
                    (newPosition[1] >= s.x1 && newPosition[1] <= s.x2)
                    || (newPosition[1]+newSize >= s.x1 && newPosition[1]+newSize <= s.x2)
                    )
                  && (
                    (newPosition[0] >= s.y1 && newPosition[0] <= s.y2)
                    || (newPosition[0]+newSize >= s.y1 && newPosition[0]+newSize <= s.y2)
                    );
            }).length > 0;
        }

        // store to check later stars against it
        stars.push({
            x1: newPosition[1],
            x2: newPosition[1] + newSize,
            y1: newPosition[0],
            y2: newPosition[0] + newSize,
            size: newSize});

        $(this).css({
            'margin-left':newPosition[1]+'px',
            'margin-top':newPosition[0]+'px',
            'width':newSize + 'px',
            'height':newSize + 'px'
        });
        $(this).delay(800*index).fadeIn('slow');
    })
});

Answer 2

这是我练习的方法......重叠的位置需要更多的努力...我会留给你自己排序（可能需要重组代码我处理这里）

<强> jsFiddle Demo

JS

function starDust(wdt, hgt, tSt, tAp){
   var timer = tAp * 1000;
   var defInt = tSt,      
        starInt = setInterval(function(){
            var posX = Math.floor((Math.random() * wdt) + 1),
                posY = Math.floor((Math.random() * hgt) + 1),
                size = Math.floor((Math.random() * 10) + 1);

            $('body').append('<div class="star"></div>');
                        $('.star:last').css({'width':size,'height':size,'left':posX,'top':posY}).hide().fadeIn('slow');

     var totalStars = $('.star').length;

     if(totalStars == defInt){
     clearInterval(starInt);
     }

 }, timer);

}

$(function(){

    // Function arguments: starDust(max X position in px, max Y position in px, total number of stars, time in seconds between stars show);
    starDust(600,300,25,1);

});

CSS

body{
    background-color:#000;
}

.star{
    position: absolute;
    background-color:#fff;
    min-width:5px;
    min-height:5px;
}

DIV在页面上随机淡入

2 个答案: