使用 JavaScript 将图像从 A 移动到 B答案

【问题标题】：Moving an image from A to B with JavaScript使用 JavaScript 将图像从 A 移动到 B
【发布时间】：2011-12-22 17:38:01
【问题描述】：

这是我第一次来这里，我不知道如何缩进这个抱歉：/

我有一张货车的图像，我正试图将它移过屏幕，让它看起来好像正在开车。完成后，我将缩放图像，使其看起来好像正在移开（并变小）。

我需要在没有任何包（如 JQuery）的标准 javascript 中完成此操作。

我所拥有的是一辆面包车，由于某种我无法分解的原因，它沿着 2 条路径而不是一条路径行驶。也朝错误的方向移动（它应该沿着路径 y=-25x 移动，因此每向右移动 25 个像素，它就应该向上移动 1 个像素）。

为了说明我想要达到的目标，请看这张图片： http://i.stack.imgur.com/9WIfr.jpg

这是我的 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);        
}

这是我的 HTML 文件：

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

【问题讨论】：

如何格式化 Stack Overflow 帖子：stackoverflow.com/editing-help
顺便说一句，你已经把它缩进得很好。最好的方法是简单地粘贴缩进的代码，在编辑器中突出显示，然后按下代码按钮（或 CTRL+K 组合）。
谢谢，实际上它不允许我发布这个并且错误消息说使用 CTRL+K 所以我这样做了。

标签： javascript animation transition motion

【解决方案1】：

除非您有无库要求，或者特别喜欢重新发明轮子，否则我会使用 jQuery 的效果库来解决这个问题，尤其是 .animate:http://api.jquery.com/animate/。请参阅该页面上的第一个示例。

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

更少的代码意味着更少的维护。表示满意的客户。

【讨论】：

感谢您的回答，但我真的不想在一个非常简单的（除了这 1 个 javascript 动画）网站上合并一个 243kb 的 javascript 文件。
您不必提供 javascript 文件。使用 CDN。这样，浏览器可能已经缓存在另一个站点上使用它的 js 文件也将用于您的。
jQuery 的压缩和 gzip 压缩版本只有 ~30kb。如果您从 Google 的 cdn (ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js) 获得它，那么用户已经从其他页面加载了它（因为几乎每个人都从 Google 获得它），这是一个很大的变化。编辑：Mithon 是第一个
哦，我明白了。多谢你们。在这个JQuery包来之前我很久以前就退出了javascript，所以我错过了很多。

【解决方案2】：

即使您已经接受了答案，这里有一种无需 jQuery 的方法。

尚未完成，但概念有效。

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

这里的工作演示：http://webbies.dk/tmp/tmp.html

【讨论】：