<script>
var btn = document.getElementById("btn");
var box =document.getElementById("box");
btn.οnclick=function(){
move(box,{
width:100,
height:600,
left:600
},function(){
move(box,{
top:30,
left:30
});
})
}
function move(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(var k in json){
var leader=parseInt(getStyle(obj,k));
var step=(json[k]-leader)/10;
step=step>0?Math.ceil(step):Math.floor(step);
leader=leader+step;
obj.style[k]=leader+"px";
if (leader!=json[k]) {
flag=false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
},30)
}
function getStyle(obj,attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}
else
{
return window.getComputedStyle(obj,null)[attr];
}
}
</script>
var btn = document.getElementById("btn");
var box =document.getElementById("box");
btn.οnclick=function(){
move(box,{
width:100,
height:600,
left:600
},function(){
move(box,{
top:30,
left:30
});
})
}
function move(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(var k in json){
var leader=parseInt(getStyle(obj,k));
var step=(json[k]-leader)/10;
step=step>0?Math.ceil(step):Math.floor(step);
leader=leader+step;
obj.style[k]=leader+"px";
if (leader!=json[k]) {
flag=false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
},30)
}
function getStyle(obj,attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}
else
{
return window.getComputedStyle(obj,null)[attr];
}
}
</script>