JavaScript Animasyon - dış div sınırına ulaşıldığında iç div hareketini durdurma

Yığın Taşması'nın tüm beyni merhaba!
Okuldaki bir ödevin bir parçası olarak CSS ve JavaScript kullanarak basit bir animasyon oluşturması istendi.
Büyük bir dış div oluşturdum ve bunun içine JavaScript kullanarak başka bir küçük div yerleştirdim, JS divanpress olayını kullanarak daha küçük div'umdaki küçük div'u taşıyabiliyorum.
Yapamadığım şeyler (ve bu benim sorum.) Sadece dur, daha büyük div sınırına ulaştığında daha küçük div. Kodumda, dış divı "geçtikten" sonra gizlenir.
Herhangi bir nedenle, bu sitede yerleşik snippet'i kullanırken işe yaramayacağım. WebStorm 11'de sihir gibi çalışır! Herhangi bir öneri size yardımcı olur, şimdiden teşekkürler!JavaScript Animasyon - dış div sınırına ulaşıldığında iç div hareketini durdurma

<script> 
 
    //Declare Variables 
 
    var test = document.getElementById("test"); 
 
var object = document.getElementById("object"); 
 
var posx = 200; 
 
var posy = 200; 
 
var width = 100; 
 
var height = 100; 
 
var rotate = 0; 
 
//On KeyDown 
 
document.onkeydown = function keyPress(event) { 
 
    var x = event.which; 
 
    var speed = 5; 
 

 
    switch (x) { 
 
     case 38: 
 
     test.innerHTML = "Up"; 
 
     posy -= speed; 
 
     object.style.top = posy + "px"; 
 
     break; 
 
     case 39: 
 
     test.innerHTML = "Right"; 
 
     posx += speed; 
 
     object.style.left = posx + "px"; 
 
     break; 
 
     case 40: 
 
     test.innerHTML = "Down"; 
 
     posy += speed; 
 
     object.style.top = posy + "px"; 
 
     break; 
 
     case 37: 
 
     test.innerHTML = "Left"; 
 
     posx -= speed; 
 
     object.style.left = posx + "px"; 
 
     break; 
 
     case 90: 
 
     width += 1; 
 
     height += 1; 
 
     test.innerHTML = "Z"; 
 
     object.style.width = width + "px"; 
 
     object.style.height = height + "px"; 
 
     break; 
 
     case 88: 
 
     test.innerHTML = "X"; 
 
     width -= 1; 
 
     height -= 1; 
 
     object.style.width = width + "px"; 
 
     object.style.height = height + "px"; 
 
     break; 
 
     case 65: 
 
     rotate += 1; 
 
     object.style.transform = "rotate('rotate')"; 
 

 
    } 
 

 
    < /script>

<style> * { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#myDiv { 
 
    background-color: #005f5f; 
 
    width: 500px; 
 
    min-height: 500px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    display: block; 
 
} 
 
#object { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    top: 200px; 
 
    left: 200px; 
 
    display: block; 
 
} 
 
</style>

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Lesson #2</title> 
 
</head> 
 

 
<body> 
 
    <h1>Lesson #2</h1> 
 
    <div id="myDiv"> 
 
    <div id="object"> 
 

 
    </div> 
 
    </div> 
 
    <div id="test"> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

kaynak

2016-04-08 panranadox

Az önce sınırda değildir emin olmak için bir kontrol deyimi eklemek gerekiyordu. Bir resimse, pencerede hareket eden nesnenin genişliğini HALF olarak ayarlamak istersiniz. Aksi takdirde ekranın dışına çıkar. Yani 10 piksel nokta kullanıyorsanız, 0 ila 5 ve 200 ila 195 arasında değiştirin, vb.

<script> 
    //Declare Variables 
    var test = document.getElementById("test"); 
var object = document.getElementById("object"); 
var posx = 200; 
var posy = 200; 
var width = 100; 
var height = 100; 
var rotate = 0; 

//On KeyDown 
document.onkeydown = function keyPress(event) { 
    var x = event.which; 
    var speed = 5; 

    switch (x) { 
     case 38: 
     if(posy > 0){ 
     test.innerHTML = "Up";  
     posy -= speed; 
     object.style.top = posy + "px"; 
     } 
     break; 
     case 39: 
     if(posx < 200){ 
     test.innerHTML = "Right"; 
     posx += speed; 
     object.style.left = posx + "px"; 
     } 
     break; 
     case 40: 
     if(posy < 200){ 
     test.innerHTML = "Down"; 
     posy += speed; 
     object.style.top = posy + "px"; 
     } 
     break; 
     case 37: 
     if(posx > 0){ 
     test.innerHTML = "Left"; 
     posx -= speed; 
     object.style.left = posx + "px"; 
     } 
     break; 
     case 90: 
     width += 1; 
     height += 1; 
     test.innerHTML = "Z"; 
     object.style.width = width + "px"; 
     object.style.height = height + "px"; 
     break; 
     case 88: 
     test.innerHTML = "X"; 
     width -= 1; 
     height -= 1; 
     object.style.width = width + "px"; 
     object.style.height = height + "px"; 
     break; 
     case 65: 
     rotate += 1; 
     object.style.transform = "rotate('rotate')"; 

    } 

    < /script>

kaynak

2016-04-08 01:54:51

JavaScript Animasyon - dış div sınırına ulaşıldığında iç div hareketini durdurma

cevap

İlgili konular