Question

我使用几个按钮来创建动作，现在当我使用marginLeft将元素移动到左右div#ball时，我遇到了问题，它不适合页面并且跳出来从左侧和右侧退出。我如何设置限制并避免元素退出？

$(document).ready(function() {
  $('#fastleft').click(function() {
    $('#ball').toggleClass('rotated');
    $('#ball').animate({
      'marginLeft': "-=300px"
    });
  });

  $('#moveleft').click(function() {
    $('#ball').toggleClass('rotated');
    $('#ball').animate({
      'marginLeft': "-=20px"
    });
  });

  $('#moveright').click(function() {
    $('#ball').toggleClass('rotated');
    $('#ball').animate({
      'marginLeft': "+=20px"
    });
  });

  $('#fastright').click(function() {
    $('#ball').toggleClass('rotated');
    $('#ball').animate({
      'marginLeft': "+=300px"
    });
  });

});

#ball {
  width: 50px;
  height: 50px;
  display: inline-block;
  /*background-image: url(./boll.png);*/
  background-color:red;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.rotated {
  animation-duration: 0.5s;
  animation-name: ball;
}

@keyframes ball {
  0% {
    transform: rotate(100deg)
  }
  25% {
    transform: rotate(200deg)
  }
  50% {
    transform: rotate(300deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="butts">
    <button id="fastleft" type="button">FastLeft</button></button>
    <button id="moveleft" type="button">Left</button>
    <button id="moveright" type="button">Right</button>
    <button id="fastright" type="button">FastRight</button>
  </div>
  <br>
  <div id="ball"></div>
</div>

Answer 1

以下是使用function和data属性的代码的更优化版本。如果您对此有任何疑问，请检查并告诉我。

＆＃13;

var ball = $('#ball');
var position = 0;
var bw = ball.width();
var ww = $('body').width();

$('button').click(function() {    
  var speed = $(this).data('speed');
  moveBall(speed);
});


function moveBall(px){
  position+= px;
  position = Math.min(position,ww-bw);
  position = Math.max(position,0);
  
  console.log(position);

  ball.toggleClass('rotated').animate({
      'marginLeft': position+"px"
  });
}

＆＃13;

    #ball {
      width: 50px;
      height: 50px;
      display: inline-block;
      /*background-image: url(./boll.png);*/
      background-color:red;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
    }

    .rotated {
      animation-duration: 0.5s;
      animation-name: ball;
    }

    @keyframes ball {
      0% {
        transform: rotate(100deg)
      }
      25% {
        transform: rotate(200deg)
      }
      50% {
        transform: rotate(300deg)
      }
      100% {
        transform: rotate(360deg)
      }
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div class="container">
      <div id="butts">
        <button data-speed="-300" id="fastleft" type="button">FastLeft</button>
        <button data-speed="-20" id="moveleft" type="button">Left</button>
        <button data-speed="20" id="moveright" type="button">Right</button>
        <button data-speed="300" id="fastright" type="button">FastRight</button>
      </div>
      <br>
      <div id="ball"></div>
    </div>

＆＃13;

Answer 2

尝试使用其他CSS属性，例如float和align，而不是在像素到边距或填充属性中提供如此大的值。这几乎总是会将您的元素推出页面，尤其是在使用小屏幕尺寸时。你也应该尝试使用bootstrap。它会让你的生活更轻松。

如何防止从页面退出或跳出元素？

2 个答案: