使用 JavaScript 将图像从 A 移动到 B
Posted
技术标签:
【中文标题】使用 JavaScript 将图像从 A 移动到 B【英文标题】：Moving an image from A to B with JavaScript 【发布时间】：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 帖子：***.com/editing-help 顺便说一句，你已经把它缩进得很好。最好的方法是简单地粘贴缩进的代码，在编辑器中突出显示，然后按下代码按钮（或 CTRL+K 组合）。 谢谢，实际上它不允许我发布这个并且错误消息说使用 CTRL+K 所以我这样做了。 【参考方案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
【讨论】：
以上是关于使用 JavaScript 将图像从 A 移动到 B的主要内容，如果未能解决你的问题，请参考以下文章
使用 multipart/form-data 将图像从移动应用程序上传到 API
如何将从输入字段获取的画布名称与Javascript中的画布合并？
是否可以使用淡入淡出将 ui 元素从一个位置移动到另一个位置？