类似于jQuery的动画效果
闲来无事，就写了个比较方便调用的动画效果
function skyAnimate(obj, options, step, callback) {
if (!obj) return;
var n = 0,
timer = null,
oStyle = [],
de = [],
c = [],
b = 0;
step = {
'slow': 100,
'normal': 50,
'fast': 10
} [step] || 64;
var d = function(x) {
return Math.sqrt(1 - Math.pow((x - 1), 2))
}
for (var i in options) {
var obj_style = parseInt(sky_css(obj, i));
if (!obj_style) obj_style = 0;
de.push(obj_style) c.push(options[i] - obj_style);
oStyle.push(i);
}
timer = setInterval(function() {
if (n >= step) {
clearInterval(timer);
if (callback && callback instanceof Function) callback();
}
b = d(n / step);
for (var j = 0,
len = de.length; j < len; j++) {
obj.style[oStyle[j]] = de[j] + c[j] * b + 'px';
}
n++;
},
15);
}
function sky_getType(o) {
var t;
return ((t = typeof(o)) == 'object' ? o == null && 'null' || (Object.prototype.toString.call(o)).slice(8, -1) : t).toLowerCase();
}
function sky_css(o, name) {
if (sky_getType(name) == 'string') {
if (o.style[name]) return o.style[name];
if (o.currentStyle) return o.currentStyle[name];
if (document.defaultView) return document.defaultView.getComputedStyle(o, "")[name];
} else if (sky_getType(name) == 'object') {
for (var i in name) {
o.style[i] = name[i];
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box { width:200px; height:200px; position:absolute; top:0; left:0; background:red; overflow:hidden;}
</style>
<script type="text/javascript" src="skyAnimate.js"></script>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box');
skyAnimate(box,{'top':200,'left':300,'width':500,'height':400},'slow',function(){alert('oh yeah!!')})
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
var box = document.getElementById('box');
skyAnimate(box,{'top':200,'left':300,'width':500,'height':400},'slow',function(){alert('oh yeah!!')})
//box就是要执行动画的对象了
//{'top':200,'left':300,'width':0,'height':0}这是动画参数，里面的参数任选。
//'slow' 控制动画运行速度，有slow, normal fast三种
//function(){alert('oh yeah!!')} 动画执行完后运行的参数，这个可选
