Bewegen Sie ein Bild, um es langsam

Habe ich ein Bild von einem Heißluftballon. Ich brauche es, um zu Fliegen "meine Seite" nach dem Zufallsprinzip (ist zu klein). Ich brauche es nur zum Fliegen in der oberen Hälfte von meiner Seite. Ich fand den folgenden code:

$("#Friends").animate({ 
        top: "-=30px",
      }, duration );

Aber ich bin mir nicht sicher, wie könnte ich die Schleife und es gehen beide auf die x-Achse und der y-Achse. Dank, wenn Sie können! Ich habe jQuery aktiviert 🙂

  • Diese site ist genial
  • lol, ich poste ein Bild, es bald, es ist ein Projekt für meine Klasse, aber ich möchte hinzufügen, ein bisschen Schwung 🙂
InformationsquelleAutor Freesnöw | 2011-05-06
  1. 3

    CSS

    #friends { position: absolute; }

    Markup 

    <img src="http://jsfiddle.net/img/logo.png" 
id="friends"/>

    JS 

    function moveit() {

    var newTop = Math.floor(Math.random()*350);
    var newLeft = Math.floor(Math.random()*1024);
    var newDuration = Math.floor(Math.random()*5000);

    $('#friends').animate({
      top: newTop,
      left: newLeft,
      }, newDuration, function() {
        moveit();
      });

}

$(document).ready(function() {
    moveit();
});

    Live-demo:
    http://jsfiddle.net/W69s6/embedded/result/

    Weitere aktualisierte Live-Demo: http://jsfiddle.net/9cN4C/

    (alte demo ist veraltet und hat ein broken link, aber der code ist trotzdem korrekt, so wird es für die Referenz, nicht für demonstration)

    • Danke für den edit. Ich scheint jsfiddle zog Ihre logo png in ein anderes Verzeichnis.
    • Ja haha, das ist der Grund, warum ich verwendet das google-logo dieser Zeit, neigt Sie dazu, mehr ... dauerhaft? Haha, guten Tag:)
    InformationsquelleAutor Majid Fouladpour
  2. 5

    Wie wäre es mit etwas wie dieses.... LIVE GEIGE

    HTML

    <img src="http://www.birdsnways.com/imgs/blbd48rt.gif" id="picture" />

    CSS

    #picture{
    position:absolute;   
}

    JS

    doNextPoint();

function doNextPoint(){

    var maxX = $(window).width() - $('#picture').width();    
    var newX = rand(0, maxX);    
    var maxY = ($(window).height()/2) - $('#picture').height();
    var newY = rand(0, maxY);
    var speed  = rand (1000, 3000);

    $('#picture').animate({
        'top': newY + 'px',
        'left': newX + 'px' 
    }, speed, function(){
        doNextPoint();    
    });
}


function rand (min, max) {
     return Math.floor(Math.random() * (max - min + 1)) + min;
}
    • Guten job, wobei die Aufgabe, den ganzen Weg.
    • +1 das ist besser als die momentan akzeptierte Antwort, wie es mit bedacht, nimmt Bildschirm-Größen berücksichtigt.
    • Und ich habe gerade realisiert, dieser wurde geschrieben 5 Minuten bevor ich gepostet meine Antwort und Sie sehen sich sehr ähnlich! Ich fühle mich schlecht 🙁
    InformationsquelleAutor Dutchie432
  3. 1

    Können Sie stick, der code in eine benannte Funktion, und diese Funktion als callback-parameter für die animation, so dass es ruft sich selbst erneut auf, nachdem es abgeschlossen ist.

    var flying;
flying = function() {
    $("#Friends").animate({ 
        top: "-=30px",   //you'll need to change this
      },
      duration,
      flying
    );
}
flying();

    Wie es ist, es wird nur immer fliegt nach oben, weil die animation immer um 30 px. Sie haben Sie zu ändern, die Fliegen Funktion randomize, die Bewegungen ein wenig. Für mehr Realismus, speichern Sie den vorherigen Bewegung, und ändern Sie einfach ein wenig (geringe Beschleunigung), so ist es nicht sehr ruckartige Bewegungen.

    InformationsquelleAutor Tesserex
  4. 0

    Schleife: verwenden SetTimeout: https://developer.mozilla.org/en/window.setTimeout

    Für die x-Achse, verwenden Sie die CSS-Eigenschaft left: (top: erhalten Sie y-Achse)

    • Nein - es ist besser, verwenden Sie animate() und die Funktion erneut aufrufen sobald Sie fertig sind (jsfiddle.net/Jaybles/AudTa). setTimeout ist viel weniger bevorzugt.
    • Du hast Recht, das ist ein viel besserer Umgang damit.
    InformationsquelleAutor thedaian
Schreibe einen Kommentar