<script>
var box = document.getElementById("box");
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
btn200.onclick = function() {
animate(box,{width:200,height:300,top:250});
}
btn400.onclick = function() {
animate(box,{top:400});
}
var timer = null;
function animate(obj,json) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for(var attr in json) {
var current = parseInt(getStyle(obj, attr));
var step = (json[attr] - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style[attr] = current + step + "px";
if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
}
},30)
}
//返回目标样式函数
function getStyle(obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else {
return window.getComputedStyle(obj,null)[attr];
}
}
</script>
添加回答
举报
0/150
提交
取消