你好 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>最佳答案
您只需要添加一个控制语句以确保您不在边界处。如果是图片，您希望将其设置为在窗口中移动的对象宽度的一半。否则它会跑到屏幕外。因此，如果您使用的是 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 移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36489363/