模拟CSS3 多组位移运动属性的框架封装
obj是将要运动的对象，json是运动完成时的位移结果。
封装要点：
1.定时器开关flag的定义要放在for in结构的外面，否则，每遍历一次，都会定义一个 新的flag
2.if(current != json[attr]) { flag = false; }要放到遍历的里面，因为定时器每运行一次，都要判断一下是否到达终点
3.if(flag == false) {clearInterval(obj.timer)}放到遍历结构的外面，当所有的位移都达到json给的数值的时候，才关闭定时器。否则，只有一个json[attr]达到位移终点时，定时器就会关闭，此时，可能别的位移还没有到达json数据给的终点。
function animate(obj,json){
clearInterval(obj.timer);
var flag = true;
obj.timer = setInterval(function (){
for (var attr in json) {
// var current = parseInt(getCss(obj,attribute))
// getCss(obj,attr)中的attr是从json中获取到的，因此不能用attribution了
var current = parseInt(getCss(obj,attr));
var step = (json[attr] - current) /10;
step = step >0 ? Math.ceil(step) : Math.floor(step);
// obj.style[attr] = parseInt(getCss(obj,attr)) + step + 'px' ;
obj.style[attr] = current + step + 'px' ;
if(current != json[attr]) {
flag = false;
}
}
},30);
if(flag == false) {clearInterval(obj.timer)}
}
案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
opacity: 0.3;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
var box = document.getElementById("box");
btn200.onclick = function() {
animate(box,{top: 300,height:200,width : 600});
}
btn400.onclick = function() {
animate(box,{top: 100,height:500,width : 300});
}
function animate(obj,json){
clearInterval(obj.timer);
var flag = true;
obj.timer = setInterval(function (){
for (var attr in json) {
// var current = parseInt(getCss(obj,attribute))
// getCss(obj,attr)中的attr是从json中获取到的，因此不能用attribution了
var current = parseInt(getCss(obj,attr));
var step = (json[attr] - current) /10;
step = step >0 ? Math.ceil(step) : Math.floor(step);
// obj.style[attr] = parseInt(getCss(obj,attr)) + step + 'px' ;
obj.style[attr] = current + step + 'px' ;
if(current != json[attr]) {
flag = false;
}
}
},30);
if(flag == false) {clearInterval(obj.timer)}
}
function getCss(obj,attribute) {
if(obj.currentStyle) {
return obj.currentStyle[attribute];}else {
return window.getComputedStyle(obj,null)[attribute];}
}
</script>
