使用 JavaScript 将图像从 A 移动到 B
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8021779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Moving an image from A to B with JavaScript
提问by Ozzy
Its my first time here and I don't know how to indent this sorry :/
这是我第一次来这里，我不知道如何缩进这个抱歉：/
I have an image of a van and I am trying to move it across the screen to as if it is driving. Once that is done I will scale the image to appear as if it is moving away (and getting smaller).
我有一个面包车的图像，我试图将它移动到屏幕上，就像它在开车一样。完成后，我将缩放图像以使其看起来好像正在移动（并且越来越小）。
I need this to be done in standard javascript without any packages (such as JQuery) please.
我需要在没有任何包（例如 JQuery）的标准 javascript 中完成此操作。
What I've got is a van which for a reason I can't break down is moving along 2 paths instead of one. Also moving in the wrong direction (it should move along the path y=-25x so that every 25 pixels moved to the right it should move 1 pixel upwards).
我拥有的是一辆厢式货车，由于我无法分解的原因，它正在沿着 2 条路径而不是一条路径行驶。同样朝错误的方向移动（它应该沿着路径 y=-25x 移动，这样每向右移动 25 个像素，它就应该向上移动 1 个像素）。
To illustrate what I am trying to achieve, please see this image: http://i.stack.imgur.com/9WIfr.jpg
为了说明我想要实现的目标，请参阅此图片：http: //i.stack.imgur.com/9WIfr.jpg
This is my javascript 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);
}
This is my HTML file:
这是我的 HTML 文件：
<script type="text/javascript" src="delivery.js"> </script>
<body onLoad="initVan();">
<img id="van" width=413 height=241/>
<script type="text/javascript" src="delivery.js"> </script>
<body onLoad="initVan();">
<img id="van" width=413 height=241/>
采纳答案by Gaute L?ken
Unless you have a no-libraries requirement, or particularly enjoy reinventing the wheel, I'd solve this using jQuery's effects library, and in particular .animate: http://api.jquery.com/animate/. See the first example on that page.
除非您没有库要求，或者特别喜欢重新发明轮子，否则我会使用 jQuery 的效果库来解决这个问题，特别是 .animate：http://api.jquery.com/animate/ 。请参阅该页面上的第一个示例。
$(document).ready(function() {
$('#van')
.attr({
width: 413,
height: 241 //etc.
})
.animate({
width: "70%",
height: "70%" //etc.
}, 3000);
});
Less code means less maintenance. Means happy customer.
更少的代码意味着更少的维护。意味着快乐的客户。
回答by Webbies
Even though you already accepted an answer, heres a way to do it without jQuery.
即使您已经接受了答案，这里也有一种无需 jQuery 的方法。
Not finished, but the concept works.
还没有完成，但这个概念有效。
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);
}
}
Working demo here: http://webbies.dk/tmp/tmp.html
这里的工作演示：http: //webbies.dk/tmp/tmp.html
