Bewegen Sie ein Bild von A nach B mit JavaScript

Sein mein erstes mal hier und ich weiß nicht, wie der Einzug dieses Leid :/

Habe ich ein Bild von einem van, und ich versuche, ihn zu bewegen über den Bildschirm, als ob es fährt.
Sobald das getan ist, werde ich das Bild zu skalieren, zu erscheinen, als wenn es Weg (und kleiner).

Muss ich dies in standard-javascript ohne jegliche Pakete (wie z.B. JQuery) Sie bitte.

Was ich habe ist ein van was für einen Grund kann ich nicht brechen entlang bewegt sich 2 Pfade, die sich anstelle von einem. Auch in die falsche Richtung (Sie sollte sich entlang des Weges y=-25x, so dass alle 25 Pixel nach rechts verschoben, sollte es verschieben 1 pixel nach oben).

Um zu verdeutlichen, was ich versuche zu erreichen, bitte, sehen Sie dieses Bild:
http://i.stack.imgur.com/9WIfr.jpg

Dies ist meine javascript-Datei:

var viewWidth = 800;        
var viewHeight = 480;        
var fps = 30;        
var delay = getFrame(fps);        
var vanWidth, vanHeight, vanObj;   

function initVan() {        
  vanObj = document.getElementById("van");        
  vanObj.style.position = "absolute";        
  vanObj.src = "pics/delivery/van.png";        
  vanWidth = 413;        
  vanHeight = 241;        
  var startX = 0-vanWidth;        
  var startY = viewHeight-vanHeight;        
  setPosition(startX,startY);        
  transition(startX,startY,3000);        
}

function transition(startX,startY,time) {        
  //the intention of this is to follow a path y=-25x in mathematical terms
  var endX = viewWidth;        
  var endY = startY-(endX/-25);        
  //note that this is the velocity per millisecond
  var velocityX = (endX-startX)/time;        
  var velocityY = (endY-startY)/time;        
  alert(endY+", "+startY);        
  move(velocityX,velocityY,endX,endY);        
}

function move(vX,vY,eX,eY) {        
  var posX = getX();        
  var posY = getY();        
  if (posX<=eX || posY<=eY) {        
    //velocityX (in milliseconds) * delay = the amount of pixels moved in one frame @fps=30
    var moveX = vX*delay;        
    var moveY = vY*delay;        
    var newX = posX+moveX;        
    var newY = posY+moveY;        
    setPosition(newX,newY);        
    setTimeout(function() {        
        move(vX,vY,eX,eY);        
    }, delay);        
  }        
} 


function getX() {        
  return vanObj.offsetLeft;        
}    

function getY() {        
  return vanObj.offsetTop;        
}  

function setPosition(newX,newY) {        
  vanObj.style.left = newY + "px";        
  vanObj.style.top = newX + "px";        
}        

function setSize(scaleX,scaleY) {        
  vanWidth *= scaleX;        
  vanHeight *= scaleY;        
  vanObj.width = vanWidth;        
  vanObj.height = vanHeight;        
}      

function getFrame(fps) {        
  return Math.floor(1000/fps);        
}

Dies ist meine HTML Datei:

<script type="text/javascript" src="delivery.js"> </script>
<body onLoad="initVan();">
<img id="van" width=413 height=241/>

Wie format Stack-Overflow-posts: stackoverflow.com/editing-help
Sie haben eingerückt, sondern es ist vielmehr auch durch die Art und Weise. Der beste Weg ist, einfach fügen Sie Ihren code eingerückt, markieren Sie es im editor und drücken der code-Taste (oder die STRG+K-Kombination).
Danke, eigentlich wäre es mir nicht erlauben, Sie zu posten und die Fehlermeldung sagte, verwenden Sie STRG+K, also Tat ich das.

InformationsquelleAutor Ozzy | 2011-11-05

  1. 5

    Es sei denn, Sie haben eine no-Bibliotheken Anforderung, oder besonders gerne das Rad neu erfinden, ich würde lösen dieses mittels jQuery-Effekte-Bibliothek, und insbesondere .animieren: http://api.jquery.com/animate/. Siehe das erste Beispiel auf dieser Seite.

    $(document).ready(function() {
  $('#van')
    .attr({
      width: 413,
      height: 241  //etc.
    })
    .animate({
      width: "70%",
      height: "70%"  //etc.
  }, 3000);
});

    Weniger code bedeutet weniger Wartung. Bedeutet zufriedene Kunden.

    Vielen Dank für deine Antwort, aber ich habe wirklich keine Lust zu übernehmen, 243kb javascript-Datei ist eine sehr einfache (mit der Ausnahme des 1 javascript animation) website.
    Sie nicht haben, um zu dienen Sie die javascript-Datei. Verwenden Sie die CDN. So der js-Datei, die der browser wird wohl schon das Zwischenspeichern von der Nutzung auf einer anderen Website verwendet werden, für Euch ebenso.
    Die minified und gzipped version von jQuery ist nur ~30kb. Und wenn man es von Googles cdn (ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js), gibt es eine große Veränderung, die der Benutzer hat, geladen von einer anderen Seite schon (weil fast jeder bekommt es von Google). Edit: Mithon wurde ersten
    Ohh, ich verstehe. Danke Jungs. Ich höre javascript vor langer Zeit, bevor das JQuery Paket kam, so dass ich verpasst eine Menge.

    InformationsquelleAutor Mithon

  2. 2

    Obwohl Sie bereits akzeptiert eine Antwort, hier ist ein Weg, es zu tun, ohne jQuery.

    Nicht fertig, aber das Konzept funktioniert. 

       window.onload = function () {
    updateVan(0);
    function updateVan(i)
    {
        var t = setTimeout(function () {
            document.getElementById("van").style.marginLeft = i + "px";
            document.getElementById("van").style.marginTop = (i/10) + "px";
            document.getElementById("van").style.height = (100-(i/10)) + "px";
            document.getElementById("van").style.width = (100-(i/10)) + "px";
            if (i < 300) updateVan(i+1);
        },30);
    }
}

    Arbeiten demo hier: http://webbies.dk/tmp/tmp.html

    InformationsquelleAutor Webbies

Schreibe einen Kommentar