<!DOCTYPE html>
<html>
<head>
<title>
sadsadsadsadsadsadsa
</title>
<style type="text/css" media="screen">
#box {
width: 200px;
height: 200px;
background: red;
}
</style>
<script type="text/javascript">
/**
* [animate 动画效果(可操作CSS2和CSS3)直接书写CSS3动画效果就可直接识别]
* @param {[type]} obj [要操作的对象]
* @param {[type]} json [属性]
* @param {[type]} speed [时间]
* @param {Function} fn [回调]
* @return {[type]} [description]
*/
function animate(obj ,json ,speed ,fn) {
var startTime = new Date();
var iCur = 0;
var iSpeed = 0;
var Css3 = [];
var i = 0;
var px = '';
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var iStop = true;
i++;
document.title = i;
for (var name in json) {
var iTarget = parseInt(json[name].match(/([0-9])+/g, "" ));
iCur = parseInt(obj.style[name].match(/([0-9])+/g, "" )) || parseInt(css(obj ,name).match(/([0-9])+/g, "" )) || 0;
var percentage = Math.min(1, (new Date - startTime) / speed);
if(!inArray(name ,Css3)) {
iSpeed = ( iTarget - iCur ) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
iSpeed = (iCur + (iTarget - iCur) * percentage);
iValue = iSpeed + css(obj ,name).match(/([a-z])+/g, "" );
}
else {
}
if(iCur != iTarget && json[name].match(/([a-z])+\((.)+\)/g, "" )) {
iStop = false;
iValue = json[name].replace(/([0-9])+/, iSpeed)
}
if(iCur != iTarget) {
iStop = false;
obj.style[name] = iValue;
}
}
if(iStop) {
console.log(new Date - startTime);
clearInterval(obj.timer);
fn && fn.call(obj);
}
} ,13);
}
function inArray(b,a){
for (var i = 0; i <= a.length - 1; i++) {
if(a[i] == b){
return true;
}
return false;
};
}
function css(obj, attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
return getComputedStyle(obj ,false )[attr];
}
}
window.onload = function() {
box.onclick = function() {
animate(box ,{'width':'400px','height':'600px'} ,1000 ,function() {
animate(this ,{'transform':'rotate(180deg)'},1000 ,function() {
animate(this ,{'width':'100px'},1000 ,function() {
animate(this ,{'height':'100px'},1000 ,function() {
alert(1)
})
})
})
})
}
}
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
