Di chuyển hình ảnh từ A sang B bằng JavaScript

Đây là lần đầu tiên tôi ở đây và tôi không biết làm thế nào để thụt lề lời xin lỗi này:/Di chuyển hình ảnh từ A sang B bằng JavaScript

Tôi có hình ảnh xe tải và tôi đang cố di chuyển nó qua màn hình như thể nó đang lái xe. Khi đã xong, tôi sẽ mở rộng hình ảnh để xuất hiện như thể nó đang di chuyển (và trở nên nhỏ hơn).

Tôi cần điều này được thực hiện bằng javascript chuẩn mà không cần bất kỳ gói nào (chẳng hạn như JQuery).

Những gì tôi có là một chiếc xe tải vì lý do nào đó mà tôi không thể phá vỡ đang di chuyển dọc theo 2 đường dẫn thay vì một. Ngoài ra di chuyển theo hướng sai (nó sẽ di chuyển dọc theo đường dẫn y = -25x sao cho mỗi 25 pixel di chuyển sang phải nó sẽ di chuyển 1 pixel trở lên).

Để minh họa cho những gì tôi đang cố gắng để đạt được, vui lòng xem hình ảnh này: http://i.stack.imgur.com/9WIfr.jpg

Đây là tập tin javascript của tôi:

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

Đây là tập tin HTML của tôi:

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

Nguồn

2011-11-05 Ozzy

Làm thế nào để định dạng bài viết Stack Overflow: http://stackoverflow.com/editing-help –

Bạn đã thụt vào nó khá tốt bằng cách này. Cách tốt nhất là đơn giản dán mã thụt vào của bạn, đánh dấu nó trong trình chỉnh sửa và nhấn nút mã (hoặc tổ hợp CTRL + K). –

Cảm ơn, thực sự nó sẽ không cho phép tôi đăng bài này và thông báo lỗi cho biết sử dụng CTRL + K vì vậy tôi đã làm điều đó. – Ozzy

Trừ khi bạn có yêu cầu không có thư viện, hoặc đặc biệt là thưởng thức phát minh lại bánh xe, tôi sẽ giải quyết điều này bằng cách sử dụng thư viện hiệu ứng của jQuery và đặc biệt là .animate: http://api.jquery.com/animate/. Xem ví dụ đầu tiên trên trang đó.

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

Ít mã hơn có nghĩa là ít bảo trì hơn. Có nghĩa là khách hàng hạnh phúc.

Nguồn

2011-11-05 17:25:47 Mithon

Cảm ơn câu trả lời của bạn, nhưng tôi thực sự không có mong muốn để kết hợp một tập tin javascript 243kb trên một trang web rất đơn giản (với ngoại lệ 1 hoạt hình javascript) này. – Ozzy

Bạn không phải cung cấp tệp javascript. Sử dụng CDN. Bằng cách đó, tập tin js mà trình duyệt có thể là bộ nhớ đệm allready từ việc sử dụng nó trên một trang web khác cũng sẽ được sử dụng cho bạn. – Mithon

Phiên bản rút gọn và được nén gọn của jQuery chỉ ~ 30kb. Và nếu bạn lấy nó từ Googles cdn (https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js), có một thay đổi lớn mà người dùng đã tải nó từ một số trang khác (vì hầu hết mọi người đều nhận được từ Google). Chỉnh sửa: Mithon đầu tiên là – Webbies

Mặc dù bạn đã chấp nhận câu trả lời, nhưng đó là cách để thực hiện điều đó mà không cần jQuery.

Chưa hoàn thành, nhưng khái niệm hoạt động.

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

bản demo Làm việc ở đây: http://webbies.dk/tmp/tmp.html

Nguồn

2011-11-05 17:56:21 Webbies

Di chuyển hình ảnh từ A sang B bằng JavaScript

Trả lời

Các vấn đề liên quan