Question

这是我的计算课程的家庭作业。我有一堆随机的盒子，从给定区域内随机位置的顶部开始。作业是让它们随机地穿过屏幕顶部，然后降低屏幕的高度。我管理了第一部分，让它们分散在屏幕的顶部，但至于降低屏幕的高度。我有一些有趣的结果，实际上让我发笑。这是我的代码，我认为问题出在第62行：

<head>
<style>

body, html {
    margin: 10px;
    padding: 10px;
    position: relative;
}

.box{
    height: 50px;
    width: 50px;
    border: 1px solid black;
    position: absolute;
}

#container{
    position: relative;
    height: 550px;
}

#box1{
    left: 80px;
    top: 0px;
    background: blue;
}

#box2{
    left: 120px;
    top: 200px;
    background: red;
}

</style>
</head>
<body>
<div id="header">
    <p> score <span id="score">0</span></p>
</div>
<div id = "container">
    <div id = "box1" class = "box"></div>
    <div id = "box2" class = "box"></div>
</div>



<script src="http://code.jquery.com/jquery-1.11.1.js">                              <!--Javascript below this line for speed-->
</script>
<script>

nBoxes = 2;
score = 0;

function addBoxes(){

    for(i=nBoxes+1;i<nBoxes+30;i++){

        $('#container').append('<div id="box' + i + '" class="box"></div>');
        $('#box'+i).css('top',-Math.floor(Math.random()*20)).css('left',Math.random()*screen.width);
        $('#box'+i).animate({height: "100%"},3000);
    }
    nBoxes+=30;
    /*$(".box").dblclick(function(){
            console.log($(this).attr("id"));
            $(this).animate({opacity:0.1, marginLeft:"+=150px"
            },5000);
        }
    )*/
    $('.box').click(function(){
        $(this).stop();
        $(this).remove();
        score += 1;
        $('#score').html(score);
        return false;
    }
    )
}
addBoxes();
setInterval(addBoxes,3000);
</script>
</body>

提前感谢您的帮助。

请求的jsfiddle：http://jsfiddle.net/19f65ycd/

Answer 1

虽然我不是确定你要求修复的是什么，但这个改变会使这些方框真正落下：

        $('#box'+i).animate({top: "100%"},3000);

这会改变盒子从顶部开始的位置而不是盒子的垂直尺寸，你在这里做了：

        $('#box'+i).animate({height: "100%"},3000);

Answer 2

我把它打磨了一下。 Fiddle

var nBoxes = 5;
var score = 0;

function addBoxes(){

for(i=0;i<nBoxes;i++)
    {    
        var randomColor = Math.random().toString(16).substring(2, 8);
        var randomPostion = Math.floor(Math.random() * (600 - 10 + 1)) + 10;
        var iDiv = document.createElement('div');
        iDiv.className = 'box';
        iDiv.style.cssText = 'width: 50px;height: 50px; border: 1px solid black; margin: 2px;';
        iDiv.style.background = '#' + randomColor;
        iDiv.style.left = randomPostion + 'px';
        iDiv.style.position = 'absolute';               
        $('.box').animate({height: "100%"},3000);
        document.getElementById('container').appendChild(iDiv);       
    }
$('.box').click(function()
                {
                    $(this).stop();
                    $(this).remove();
                    score += 1;
                    $('#score').html(score);
                    return false;
                })
}
addBoxes();
setInterval(addBoxes,3000);

使用屏幕高度的动画功能

2 个答案: