Jquery Einstellung einer Grenze, damit die Animation den Bildschirm nicht verlässt

Ich habe ein einfaches Spiel, in dem ich ein animiertes Bild um den Bildschirm fliege, auf das Sie klicken, um Punkte zu erzielen. Nach ungefähr 5 Sekunden fliegt das Bild vom Bildschirm. Ich möchte es nur mit allen Mitteln in einem div enthalten.Jquery Einstellung einer Grenze, damit die Animation den Bildschirm nicht verlässt

$(document).ready(function() { 
$('#cursor').animate({ 
    top: '500px' 
    , left: '500px' 
}); 
$('img').click(function() { 
    var randomNumber = Math.random(); 
    console.log(randomNumber); 
     $('#output').html(function (i, val) { 
      return val * 1 + 10 
     }); 
    $(this).animate({ 
     top: '+=' + ((Math.random() * 500) - 400) + 'px' 
     , left: '+=' + ((Math.random() * 500) - 400) + 'px' 
    }) 
}) 

function explode() { 
    alert("TIME UP!"); 
} 
setTimeout(explode, 10000);

});

Ist diese Lösung nur ein CSS-Fix oder muss es in Jquery getan werden?

Quelle

2017-03-23 Mike H

1. Verwenden Sie nicht "+ =" in Ihrem animieren.

$(this).animate({ 
    top: '+=' + ((Math.random() * 500) - 400) + 'px' 
    , left: '+=' + ((Math.random() * 500) - 400) + 'px' 
})

2. Um es im Ansichtsfenster enthalten betrachten die Verwendung von window.innerHeight und window.innerWidth

3. Sie die Breite und Höhe des div wissen müssen, um es in einem div enthalten und berücksichtige das in deinen Berechnungen (zB multipliziere das Maximum mit/height mit einer Zufallszahl zwischen 0 und 1 und subtrahiere die Bildgröße davon)

Beispiel für ein Bild in das Ansichtsfenster

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <script 
      src="https://code.jquery.com/jquery-2.2.4.js" 
      integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" 
      crossorigin="anonymous"></script> 
</head> 
<body> 

<img style="background: black; width: 15px; height: 15px; position: relative"></img> 
<script> 
    $(document).ready(function() { 
     $('img').click(function() { 
      $(this).animate({ 
       top: (Math.random() * window.innerHeight - this.height) + 'px' 
       , left: (Math.random() * window.innerWidth - this.width) + 'px' 
      }) 
     }) 
    }) 
</script> 
</body> 
</html>

Sie können dies leicht anpassen, um Ihr Bild in Ihrem div zu enthalten.

Quelle

2017-03-23 21:27:15

Vielen Dank, das ausprobieren. –

Jquery Einstellung einer Grenze, damit die Animation den Bildschirm nicht verlässt

Antwort

Verwandte Themen