任意对象的任意属性js动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#demo{
width: 50px;
height: 50px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<input id = "btn" type="button" value="点击">
<div id="demo">
</div>
<script>
var btn = document.getElementById("btn");
var demo = document.getElementById("demo");
btn.onclick = function(){
animate(demo,{"width":500,"height":500});
}
function animate(obj,json){
clearInterval(obj.timer);
// leader = leader + step;
// step = (target - leader)/10;
obj.timer = setInterval(function(){
for(var k in json){
// 属性为K，值为json[k]
var leader = parseInt(getstyle(obj,k)) || 0;
var target = json[k];
var step = (target - leader)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + 'px';
if(leader == target){
clearInterval(obj.timer);
}
}
},60);
}
function getstyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//ie678
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
console.log(getstyle(demo,'width'));
</script>
</body>
</html>
