基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享

前言：前段时间一直都好忙也就好久没有写些东西了，最近手上的事刚好告些段落了，把以前空写的写插件都拿出来分享下吧，希望对大家有些帮助，也希望有高手能帮忙指点下我的写不足和错误，一直以来自己写的东西都是在用，性能方面个人只能尽量靠近问题还很多……真心求指点；
插件简介：执行渐隐等动画效果，可以这个插件为一个附加插件 可以配合前面我发的一个弹出层 等等之类的东西用增加js展示的趣味性，
使用方法：在下面的js代码里面前面写了，大家可以看看直接复制粘贴就可以用了有问题可以联系我</p
JS代码如下 展示方式可以复制下面的HTML查看
[javascript]

/*
 createByTommy_20110525
 emial:@csslife@163.com
 用途：
 执行渐隐等动画效果
 传入参数说明：
 1、第一个参数为需要变换对象或ID；
 2、第二个参数为一个对象包含：
 1)、sty->变换对象需要改变的属性，默认为改变宽度（也可以传非style的属性比如scrollTop等）
 2)、curClass->变换对象完成改变后需要添加的当前类,默认为空
 3)、maxVal->改变属于的最大值，默认为0（如果curClass为宽高等style属性表示隐藏），当这个要改变的属性值达到时停止动画
 4)、effect->执行的动画效果默认为outQuad，如需弹跳效果将其值设置为2
 3、最后个参数为可选参数表示当动画执行完毕后运行的回调函数
 */ 

//animation 
var ani = function(){this.init.apply(this,arguments)} 
ani.prototype = { 
    _id:function(i){ 
        if(!i) return; 
        return typeof i != "string" && i.nodeType === 1 ? i : document.getElementById(i); 
    }, 
    init:function(e,s,callback){ 
        this.e = this._id(e); 
        this.setInit(s||{}); 
        var maxS = parseInt(this.s.maxVal),speed = maxS==0?Math.max(this.getSty(this.e,this.s.sty),1):maxS/5; 
        this.fun(speed,maxS,callback) 
    }, 
    formula:function(x){ 
        var f; 
        switch(this.s.effect){ 
            case 0: 
                f = "outQuad"; 
                break; 
            case 1: 
                f = "inQuad"; 
                break; 
            case 2: 
                f = "bounce"; 
                break; 
            default: 
                f = "easeInBack"; 
        } 
        this.tween ={ 
            outQuad:function(pos){return Math.pow(pos, 2)},//outQuad 
            inQuad:function(pos){return -(Math.pow((pos-1),2)-1)},//inQuad 
            bounce:function(pos){//bounce 
                if (pos < (1 / 2.75)) { 
                    return (7.5625 * pos * pos); 
                } else if (pos < (2 / 2.75)) { 
                    return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75); 
                } else if (pos < (2.5 / 2.75)) { 
                    return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375); 
                } else { 
                    return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375); 
                } 
            }, 
            easeInBack:function(pos){var s = 1.70158;return (pos) * pos * ((s + 1) * pos - s);} 
        }; 
        return this.tween[f](x); 
    }, 
    findAry:function(attr){ 
        var rg = ["width","height","top","bottom","left","right","margin","padding"]; 
        for(var z in rg){ 
            if(rg[z]==attr) return true; 
        } 
        return false; 
    }, 
    setInit:function(s){ 
        this.s = { 
            sty:"width", 
            curClass:"", 
            maxVal:0,//效果最大值 
            effect:1//执行效果 
        } 
        for(i in s) this.s[i] = s[i]; 
    }, 
    setSty:function(x){ 
        var attr = this.s.sty; 
        if(this.findAry(attr)){ 
            this.e.style[attr] = x + 'px'; 
            var isIE6 = navigator.appVersion.indexOf("MSIE 6")>-1; 
            isIE6&&attr=="top"&&(this.e.style[attr] = x + document.documentElement.scrollTop + 'px'); 
        }else if(attr=="opacity"){ 
            this.s.maxVal===1&&(this.e.style.display = "block"); 
            this.e.style.opacity = x; 
            this.e.style.filter = "alpha(opacity="+x*100+")"; 
        }else{ 
            this.e[this.s.sty] = x 
        } 
    }, 
    getSty:function(e,s){ 
        var val = e.currentStyle?e.currentStyle[s]:document.defaultView.getComputedStyle(e,null)[s]; 
        return parseInt(val)||0; 
    }, 
    fun:function(f,m,callback){ 
        var D = Date,t = new D,e,T = 500,_this = this; 
        return e = setInterval(function() { 
            var z = Math.min(1, (new D - t) / T), 
                c = _this.s.curClass, 
                curC = _this.e.className; 
            _this.setSty( + f + (m - f) * _this.formula(z)); 
            if (z == 1) { 
                if (callback && typeof callback == 'function') callback(); 
                _this.s.maxVal==0&&(_this.e.getAttribute("style"))&&(_this.e.style.display="none"); 
                if(c!=""&&curC.indexOf(c)<0)_this.e.className += c; 
                clearInterval(e); 
            } 
        },10); 
    } 
}

这是这个js展示的第一个DEMO1:
[html]

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="gbk"> 
<title>test</title> 
<style> 
    div,h6,body{padding:0;margin:0;} 
        div,h6{font:bold 12px/24px 'Tahoma';text-indent:15px;} 
    .car-mod{position:relative;width:200px;} 
        .car-menu{width:200px;background:#c06;cursor:pointer;color:#fff;} 
        .car-box{border:2px solid #c06;width:300px;display:none;} 
        .car-box h6{background-color:#f5f5f5;background-image:-moz-linear-gradient(#f5f5f5,#fff);} 
        .things{border-top:1px solid #ccc;padding:50px 15px;} 
</style> 
</head> 

<body> 
    <div class="car-mod" id="J_car_mod"> 

    <div class="car-menu">购物车</div> 

    <div class="car-box" id="J_car_box"> 
      <h6>我的购物车</h6> 
      <div class="things"></div> 
    </div> 

    </div> 
<script src="animation.source.js"></script> 
<script> 
    (function(){ 
        //线上调用这个插件的时候直接调用animation.js这个是压缩了的 
        var D = document,carMod = D.getElementById("J_car_mod"),carBox = D.getElementById("J_car_box"),carControl=true; 
        //移入显示 
        carMod.onmouseover = function(even){ 
            var even = even || window.event,target = even.target || even.srcElement; 
            if(target.className=="car-menu"){ 
                !!carControl&&(carObj = new ani(carBox,{maxVal:1,sty:"opacity"},function(){carControl=false;})); 
                carObj = null; 
            } 
            //移出隐藏 
            this.onmouseout = function(even){ 
                var e = even || window.event, 
                        reltg =  e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement; 
                while (reltg && reltg != this){reltg = reltg.parentNode;}         
                if(reltg != this){ 
                    !carControl&&(carObj1 = new ani(carBox,{maxVal:0,sty:"opacity"},function(){carControl=true;})); 
                    carObj1 = null; 
                } 
            } 
        } 

    })() 
</script> 
</body> 
</html>

这个是基于前面的那个弹出层的demo版本的效果，这个效果必须复制前面的弹出层的js哦部分代码如下
[html]

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>弹出层事例</title> 
<style> 
    div{padding:0;margin:0;} 
    .wra{margin:0 auto;width:1000px;overflow:hidden;} 
    .menu{border:1px solid #ccc;background:#000;color:#fff;width:250px;height:30px;font:14px/30px '微软雅黑';text-align:center;text-shadow:1px 1px 2px #f5f5f5;cursor:pointer;} 
    .con{border:1px solid #000;background:#fff;padding:30px;width:500px;height:200px;position:fixed;top:-150%;left:50%;margin:-100px 0 0 -250px;display:none;z-index:999;} 
    .close{display:block;position:absolute;right:10px;top:10px;cursor:pointer;font:bold 14px Arial;-moz-transition:-moz-transform .5s ease-in 0s;} 
    .close:hover{-moz-transform:rotate(360deg);} 
</style> 
<style> 
</style> 
</head> 

<body> 
<div class="wra"> 
    <div id="J_popup" class="menu">点击弹出层</div> 

    <div id="J_popup_con" class="con"> 
    <span id="J_colse" class="close" title="关闭">X</span> 
        弹出层内容 
  </div> 
  <script src="popup.js"></script> 
  <script src="animation.source.js"></script> 
  <script> 
        var D = document,m = D.getElementById("J_popup"),con = D.getElementById("J_popup_con"),cl = D.getElementById("J_colse"); 
        new Popup(m,con,cl,{addFun:function(){new ani("J_popup_con",{sty:"top",maxVal:"350",effect:2})},callBack:function(){con.style.display="block";new ani("J_popup_con",{sty:"top",maxVal:"0"})}}) 
    </script> 
</div> 
</body> 
</html>