类似于jQuery的动画效果

时间：2010-10-14 来源：zjhsd2007

闲来无事，就写了个比较方便调用的动画效果

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];
                }
        }
}

HTML:

<!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;  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!!')} 动画执行完后运行的参数，这个可选