Przenoszenie obrazu z A do B z JavaScript

Jest to mój pierwszy raz tutaj i nie wiem jak to wcięcie przepraszam:/Przenoszenie obrazu z A do B z JavaScript

mam obraz furgonetki i staram się przenieść go w poprzek ekran tak, jakby jechał. Po wykonaniu tej czynności przeskaluje obraz tak, aby wyglądał, jakby się oddalał (i zmniejszał).

Potrzebuję tego zrobić w standardowym javascript bez żadnych pakietów (takich jak JQuery).

To, co mam, to furgonetka, która z powodu której nie mogę się zepsuć, porusza się po dwóch ścieżkach zamiast jednej. Porusza się również w niewłaściwym kierunku (powinien przesuwać się wzdłuż ścieżki y = -25x, tak aby każde 25 pikseli przesuniętych w prawo powinno przesunąć się o 1 piksel w górę).

Aby zilustrować to, co próbuję osiągnąć, proszę zobaczyć ten obraz: http://i.stack.imgur.com/9WIfr.jpg

To jest mój plik 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);   
}

To jest mój plik HTML:

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

Źródło

2011-11-05 Ozzy

Jak sformatować posty przepełnienie stosu: http://stackoverflow.com/editing-help –

Masz wcięte go raczej dobrze na drodze. Najlepszym sposobem jest proste wklejenie wciętego kodu, wyróżnienie go w edytorze i naciśnięcie przycisku kodu (lub kombinacji CTRL + K). –

Dzięki, właściwie to nie pozwoliłoby mi opublikować tego, a komunikat o błędzie powiedział CTRL + K, więc zrobiłem to. – Ozzy

Jeśli nie masz wymagań dotyczących niewymagających bibliotek, lub w szczególności chcesz odkryć nowe koło, rozwiążę to przy użyciu biblioteki efektów jQuery, aw szczególności .animate: http://api.jquery.com/animate/. Zobacz pierwszy przykład na tej stronie.

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

Mniej kodu oznacza mniej czynności konserwacyjnych. Oznacza zadowolonego klienta.

Źródło

2011-11-05 17:25:47 Mithon

Dziękuję za odpowiedź, ale naprawdę nie mam ochoty włączać pliku javascript o wielkości 243 kb na bardzo uproszczonej (z wyjątkiem tej 1 animacji javascript). – Ozzy

Nie musisz podawać pliku javascript. Użyj CDN. W ten sposób plik js, który przeglądarka prawdopodobnie już zapisuje w pamięci podręcznej z używania go w innej witrynie, będzie również używany. – Mithon

Skalowana i spakowana wersja jQuery ma tylko ~ 30kb. A jeśli dostaniesz go z Googles cdn (https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js), jest to świetna zmiana, którą użytkownik załadował z innej strony już (ponieważ prawie każdy otrzymuje go od Google). Edytuj: Mithon był pierwszy – Webbies

Nawet jeśli już zaakceptowałeś odpowiedź, jest na to sposób bez jQuery.

Nie ukończono, ale koncepcja działa.

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 Praca tutaj: http://webbies.dk/tmp/tmp.html

Źródło

2011-11-05 17:56:21 Webbies

Przenoszenie obrazu z A do B z JavaScript

Odpowiedz

Powiązane problemy