封装一个方法，实现元素A(width:100px,height:100px)从页面位置一(top:50px,left:100px)移动到页面位置二（top:500px,left:400px）,并且有3种移动效果可以根据参数进行切换，3种效果分别是：匀速，加速，减速。要求采用HTML+css+js实现，注重代码的精简和执行效率，有清楚的代码注释，不能采用第三方框架实现（如：jquery，YUI等）。
调试欢乐多
你给定两点的位置，JSTweener算法会自动算的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>移动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="css.css" type="text/css" media="screen" />
<script type="text/javascript">
window.onload=function(){
document.getElementById("mov").style.top="50px";
document.getElementById("mov").style.left="100px";
}
var t;
function move(){ //(100,50)-->(400,500)--> 300/450
var mov=document.getElementById("mov");
var speed=7;
if(parseInt(mov.style.top)<500){
mov.style.top=parseInt(mov.style.top)+3+"px";
mov.style.left=parseInt(mov.style.left)+2+"px";
t=setInterval("move()",100);
}else{
clearInterval(t);
}
}
</script>
</head>
<body>
<div id="mov" style="width:100px;height:100px;background-color:green;z-index:100;position:absolute;"></div>
<div id="mov" style="width:400px;height:550px;background-color:yellow;top:50px;left:100px;position:absolute;z-index:99"></div>
<input type="button" onclick="move()" value="move"/>
</body>
</html>
修改代码为：
[code] function move1() {
JSTweener.addTween(square.style, {
time: getTime(),
transition: getTranstion(),
onComplete: move2,
top: 300
left: 400
});
}
function move2() {
JSTweener.addTween(square.style, {
time: getTime(),
transition: getTranstion(),
onComplete: move3,
left: 400
top: 300
});
}
function move3() {
JSTweener.addTween(square.style, {
time: getTime(),
transition: getTranstion(),
onComplete: move4,
top: 100
left: 100
});
}
function move4() {
JSTweener.addTween(square.style, {
time: getTime(),
transition: getTranstion(),
onComplete: move1,
left: 100
top: 100
});
}
[/code]