如何防止從頁面退出或跳出元素？

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屬性的更優化的代碼版本。 檢查一下，如果您對此有任何疑問，請告訴我。

 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" }); } 

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

Answer 2

嘗試使用其他CSS屬性，如float和align，而不是在像素到邊距或填充屬性中提供如此大的值。 這幾乎總是會將您的元素推出頁面，尤其是在使用小屏幕尺寸時。 你也應該嘗試使用bootstrap。 它會讓你的生活更輕松。