使用屏幕高度的動畫功能

這是用於我的計算課的作業。我有一堆隨機框，從一個給定區域內的隨機位置頂部開始。作業就是讓它們隨機地在屏幕頂部傳播，然後降低屏幕的高度。我管理第一部分，讓它們遍佈屏幕的頂部，但爲了降低屏幕的高度..我有一些有趣的結果，實際上讓我發笑。這裏是我的代碼，我認爲這個問題是在第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/

來源

2014-10-07 daltojam

雖然我不肯定它是什麼你問的修復，這一變化將使得箱子居然下降：

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

這改變了盒的位置而不是盒子的垂直尺寸，這是你在這裏所做的：

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

來源

2014-10-07 15:33:32

謝謝，這就是我一直在尋找:) – daltojam 2014-10-07 15:57:20

我把它拋光了一點點。 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);

來源

2014-10-07 16:34:02

使用屏幕高度的動畫功能

回答

相關問題