Spostamento di un'immagine da A a B con JavaScript

La mia prima volta qui e non so come rientrare questo mi dispiace:/Spostamento di un'immagine da A a B con JavaScript

Ho un'immagine di un furgone e sto cercando di spostarlo in tutto il schermo come se stesse guidando. Una volta fatto, ridimensionerò l'immagine per farla apparire come se si stesse allontanando (e diventando più piccola).

Ho bisogno che ciò avvenga in javascript standard senza pacchetti (come JQuery) per favore.

Quello che ho è un furgone che, per una ragione che non riesco ad abbattere, si muove lungo 2 percorsi invece di uno. Si muove anche nella direzione sbagliata (dovrebbe spostarsi lungo il percorso y = -25x in modo che ogni 25 pixel spostati a destra dovrebbe spostare 1 pixel verso l'alto).

Per illustrare quello che sto cercando di realizzare, vedere questa immagine: http://i.stack.imgur.com/9WIfr.jpg

Questo è il mio file 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);   
}

Questo è il mio file HTML:

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

fonte

2011-11-05 Ozzy

Come formattare i messaggi Stack Overflow: http://stackoverflow.com/editing-help –

Non hai frastagliata piuttosto bene per la via. Il modo migliore è semplicemente incollare il codice indentato, evidenziarlo nell'editor e premere il tasto codice (o la combinazione CTRL + K). –

Grazie, in realtà non mi permetteva di postare questo messaggio e il messaggio di errore diceva usare CTRL + K così l'ho fatto. – Ozzy

A meno che tu non abbia un requisito di non librerie, o in particolare divertiti a reinventare la ruota, risolverei questo usando la libreria di effetti di jQuery, e in particolare .animate: http://api.jquery.com/animate/. Guarda il primo esempio su quella pagina.

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

Meno codice significa meno manutenzione. Significa cliente felice.

fonte

2011-11-05 17:25:47 Mithon

Grazie per la tua risposta, ma non ho alcun desiderio di incorporare un file javascript 243kb su un sito web molto semplicistico (con l'eccezione di questa animazione in javascript 1). – Ozzy

Non devi servire il file javascript. Usa il CDN. In questo modo, anche il file js che il browser probabilmente sta già utilizzando come cache dal suo utilizzo su un altro sito. – Mithon

La versione minified e gzip di jQuery è solo ~ 30kb. E se si ottiene da Googles cdn (https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js), c'è un grande cambiamento che l'utente ha caricato da qualche altra pagina già (perché quasi tutti lo ricevono da Google). Modifica: Mithon era il primo – Webbies

Anche se hai già accettato una risposta, ecco un modo per farlo senza jQuery.

Non terminato, ma il concetto funziona.

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

demo Lavorare qui: http://webbies.dk/tmp/tmp.html

fonte

2011-11-05 17:56:21 Webbies

Spostamento di un'immagine da A a B con JavaScript

risposta

Problemi correlati