Déplacement d'une image de A à B avec JavaScript

Sa ma première fois ici et je ne sais pas comment le tiret cet désolé :/

J'ai une image d'un van et je suis en train de le déplacer à travers l'écran comme si elle est conduite.
Une fois que c'est fait, je l'échelle de l'image à apparaître comme si elle s'éloigne (et de plus en plus petits).

J'ai besoin de le faire en javascript standard, sans paquets (comme JQuery) s'il vous plaît.

Ce que j'ai est un van qui, pour une raison que je ne peux pas briser se déplace le long de 2 chemins au lieu d'un. Aussi aller dans le mauvais sens (il doit déplacer le long de la trajectoire y=-25x, de sorte que tous les 25 pixels déplacé vers la droite, il devrait aller de 1 pixel vers le haut).

Pour illustrer ce que je suis en train de réaliser, veuillez voir cette image:
http://i.stack.imgur.com/9WIfr.jpg

C'est mon fichier javascript:

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

C'est mon fichier HTML:

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

Comment formater un Débordement de Pile posts: stackoverflow.com/editing-help
Vous avez en retrait plutôt bien d'ailleurs. La meilleure façon est de simple collez votre code indenté, mettez-la dans l'éditeur, puis appuyez sur le bouton de code (ou CTRL+K).
Merci, en fait il ne serait pas me permettre de publier ce post et le message d'erreur dit utiliser CTRL+K donc je l'ai fait.

OriginalL'auteur Ozzy | 2011-11-05

  1. 5

    Sauf si vous avez un pas de bibliothèques exigence, et surtout de profiter de réinventer la roue, j'aimerais résoudre ce à l'aide de jQuery bibliothèque d'effets, et en particulier .animer: http://api.jquery.com/animate/. Voir le premier exemple de la page.

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

    Moins de code signifie moins d'entretien. Moyen de clients heureux.

    Merci pour votre réponse, mais je n'ai vraiment aucune envie d'intégrer une 243kb fichier javascript sur un très simpliste (à l'exception de ce 1 javascript animation de site web.
    Vous n'avez pas à servir le fichier javascript. Utiliser le CDN. De cette façon, le js-de fichiers que le navigateur est probablement déjà la mise en cache de l'utiliser sur un autre site doit être utilisé pour le vôtre.
    Le minifiés et format de la version de jQuery est que d'environ 30 ko. Et si vous l'obtenez à partir de Google cdn (ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js), il y a un grand changement que l'utilisateur a chargé à partir d'une autre page déjà (parce que presque tout le monde l'obtient à partir de Google). Edit: Mithon a d'abord été
    Ohh, je comprends. Merci les gars. J'ai arrêté de javascript, il y a longtemps avant que cette JQuery paquet est venu, donc j'ai raté beaucoup de choses.

    OriginalL'auteur Mithon

  2. 2

    Même si vous avez déjà accepté d'y répondre, voici un moyen de le faire sans jQuery.

    Pas fini, mais le concept fonctionne. 

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

    De travail démo ici: http://webbies.dk/tmp/tmp.html

    OriginalL'auteur Webbies