Question

欢迎Stack Overflow的所有主谋！作为学校作业的一部分，我被要求使用CSS和JavaScript创建一个简单的动画。
我创建了一个大的外部div，并在其中放置了另一个较小的div，使用JavaScript，我能够移动我的小通过使用JS onkeypress事件来围绕更大的div 我似乎无法做到的（这是我的问题）就是当停止较小的div时，它会到达更大的div边界。在我的代码中，它在“穿过”外部div之后显得隐藏。
由于某种原因，在使用此站点中的内置片段时，我无法使其工作。在WebStorm 11中它的工作就像魔法一样！任何建议都会有所帮助，提前谢谢！

< 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>

Answer 1

您只需添加一个控制语句，以确保您不在边境。如果是图片，则要将其设置为HALF窗口中移动对象的宽度。否则它会走出屏幕。因此，如果您使用10像素点，请将0更改为5，将200更改为195，等等。

 < 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>

JavaScript动画 - 在到达外部div边界时停止内部div移动

1 个答案: