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

Moving an image from A to B with JavaScript

本文关键字：移动 JavaScript 图像 使用      更新时间：2023-09-26

这是我第一次来这里，我不知道如何缩进对不起:/

我有一辆面包车的图像，我试图在屏幕上移动它，就好像它在开车一样。一旦完成，我将缩放图像，使其看起来好像在移动(并且变小)。

我需要这是在标准javascript没有任何包(如JQuery)请。

我得到的是一辆货车，出于我无法分解的原因，它沿着两条路而不是一条路行驶。也在错误的方向上移动(它应该沿着路径y=-25x移动，这样每向右移动25个像素，它就应该向上移动1个像素)。

为了说明我想要实现的目标，请参见下图:https://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/>

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

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

代码越少意味着维护越少。

尽管您已经接受了答案，但这里有一种不需要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

相关文章：