所以我才刚刚开始接触 Jquery，我一直在努力寻找一种方法，让我的 Angular 色在接触到 div 的末端或 div 的墙壁时停止。
这是我的 jquery 代码:
$(document).keydown(function(e) {
var position = $('#charlie').position();
switch(e.keyCode) {
case 39: // right
$('#charlie').css('left', position.left + 20 + 'px').removeClass('flip');
break;
case 37: // left
$('#charlie').css('left', position.left - 20 + 'px').addClass('flip');
}
});
CSS:
body {
padding: 0;
margin: 0;
}
h1 {
text-align: center;
font-family: jennaSue;
font-size: 50px;
}
.container {
background-image: url(../img/bg.jpg);
display: block;
margin: auto;
max-width: 500px;
height: 340px;
padding: 10px;
}
#charlie {
width: 70px;
height: 80px;
margin-top: 260px;
display: block;
margin-right: auto;
margin-left: auto;
position: absolute;
}
.flip {
transform:scaleX(-1);
}
和HTML代码:
</head>
<body>
<h1>Charlie Brown Run and Dodge</h1>
<div class="container">
<img src="img/charlie-brown.png" id="charlie" class="character">
</div>
提前致谢!
最佳答案
我认为您需要做的就是检查您的 keydown 处理程序中的边界:
$(document).keydown(function(e) {
var position = $('#charlie').position(),
width = $('#charlie').width(),
max = $('.container').width(),
step = 20;
switch(e.keyCode) {
case 39: // right
if ( position.left + width + step < max ) {
$('#charlie').css('left', position.left + step + 'px').removeClass('flip');
}
break;
case 37: // left
if ( position.left - step > 0 ) {
$('#charlie').css('left', position.left - step + 'px').addClass('flip');
}
}
});
此外，我更改了多次出现的 20。到 step可变的，所以如果你想调整它，你只需要在一个地方改变它。
关于javascript - 如何阻止我的角色走出 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33879048/