从A移动图片使用JavaScript到B [英] Moving an image from A to B with JavaScript

问题描述

它的我第一次和时间在这里我不知道该怎么缩进此深表歉意：/

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).

我需要这在标准的JavaScript来完成，没有任何包（如JQuery的），请。

I need this to be done in standard javascript without any packages (such as JQuery) please.

我所得到的是其中的一个原因，我不能打破一辆面包车沿两条路径，而不是一个运动。在错误的方向也移动（它应该沿着路径Y = -25X移动，使每个25像素向右移动，应该向上移动1像素）。

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).

要说明什么，我想实现的，请参阅本图片：
http://i.stack.imgur.com/9WIfr.jpg

To illustrate what I am trying to achieve, please see this image: http://i.stack.imgur.com/9WIfr.jpg

这是我的JavaScript文件：

This is my javascript file:

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文件：

This is my HTML file:

＆LT;脚本类型=文/ JavaScript的SRC =delivery.js＆GT; ＆LT; / SCRIPT＆GT;结果
＆LT;身体的onLoad =initVan（）;＆GT;结果
＆LT; IMG ID =面包车WIDTH = 413 HEIGHT = 241 /＆GT;

推荐答案

除非你有一个无库的要求，或者特别喜欢重新发明轮子，我想解决这个使用jQuery的特效库，特别是.animate：< A HREF =htt​​p://api.jquery.com/animate/相对=nofollow> http://api.jquery.com/animate/ 。看到页面上的第一个例子。

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.

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

减code意味着更少的维护。意味着满意的顾客。

Less code means less maintenance. Means happy customer.

这篇关于从A移动图片使用JavaScript到B的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！