Question

我在将<div>保留在<div>内时遇到问题。其中一个移动，但如果它走得太远，它会从大的和页面中移出。我正在使用Jquery为<div>设置动画。 注意：小<div>水平移动。

属性：
大<div>：
宽度：600px

#truck是小<div>。

我的代码（Jquery）：

     function moveRight(){
     $('#truck').animate({
     'marginLeft' : "+=3px"
     });
     }
     function moveLeft(){
     $('#truck').animate({
     'marginLeft' : "-=3px" 
     });
     }//later code<br>
     window.addEventListener('keydown', function(evt){
     var key = evt.keyCode;
     if( key == 39){
     moveRight() = true;
     moveLeft() = false;
     }
     if( key == 37){
     moveLeft() = true;
     moveRight() = false;
     }

     }, false);

请帮忙！没有jsfiddle，但我有google apis jquery。

Answer 1

如果不看HTML和HTML，

无法给出确切的答案CSS。但正如我想的那样

'marginLeft' : "-=3px"

执行此行时，如果margin-left的值为负值，则内部<div>将超出外部<div>的范围。

执行以下行时可能会发生同样的事情，

'marginLeft' : "+=3px

如果margin-left值大于外<div>的宽度，那么内<div>将超出外<div>的范围

Answer 2

您可以检查truck margin-left是否低于零或超出了容器的宽度。

＆＃13;

function moveRight() {
  var left = $('#truck').css("marginLeft").match(/\d+/g);
  if (left < 320) {
    $('#truck').animate({
      'marginLeft': "+=80px"
    });
  }
}

function moveLeft() {
    var left = $('#truck').css("marginLeft").match(/\d+/g);
    if (left >= 80) {
      $('#truck').animate({
        'marginLeft': "-=80px"
      });
    }
  } //later code<br>
window.addEventListener('keydown', function(evt) {
  var key = evt.keyCode;
  if (key == 39) {
    moveRight() = true;
    moveLeft() = false;
  }
  if (key == 37) {
    moveLeft() = true;
    moveRight() = false;
  }

}, false);

＆＃13;

#container {
  width: 400px;
  height: 40px;
  border: 1px solid black;
}
#truck {
  margin-left: 0px;
  width: 80px;
  height: 40px;
  background-color: #AAA;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="container">
  <div id="truck"></div>
</div>

＆＃13;

在Jquery </div> </div>中移动时如何在<div>中保留<div>标记

2 个答案: