An animation add-on plug-in based on OO, which can achieve animation effects such as bouncing and fading. Share_javascript skills

Foreword: I have been very busy some time ago and I haven’t written anything for a long time. Recently, the things at hand have just come to an end. I will take out and share all the writing plug-ins that I have written in the past. I hope it will be helpful to everyone. , I also hope that some experts can help point out my writing deficiencies and errors. I have always used what I wrote. In terms of performance, I can only try to get as close as possible and there are still many problems... I sincerely ask for advice;
Plug-in introduction: Execution Fade and other animation effects, this plug-in can be used as an additional plug-in, which can be used with a pop-up layer I posted earlier, etc. to increase the fun of js display.
How to use: Write in the following js code Yes, you can take a look and just copy and paste it. If you have any questions, please contact me. >

Copy code

The code is as follows:

/*
createByTommy_20110525
emial:@csslife@163.com
Purpose:
Perform fade-out and other animation effects
Incoming parameter description:
1. The first parameter is the object or ID that needs to be transformed;
2. The second parameter is an object containing:
1), sty-> The attribute that needs to be changed in the transformed object, the default is to change the width (can also be passed Non-style attributes such as scrollTop, etc.)
2), curClass-> The current class that needs to be added after the transformation object is changed, the default is empty
3), maxVal-> The maximum value of the change, the default is 0 (if curClass is a style attribute such as width and height, it means hidden), stop the animation when the attribute value to be changed is reached
4), effect-> The animation effect executed defaults to outQuad, if a bouncing effect is required, set its value is 2
3. The last parameter is an optional parameter indicating the callback function to be run after the animation is completed
*/

//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:
                                                                                                 > 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 & lt; (2.5 / 2.75)) {
return (7.5625 * (pos -= (2.25 / 2.75)) * pos .9375); 75);
                                                                                                                                                                         ;
        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]

复制代码 代码如下:

   

   

购物车

   

     

我的购物车

     

   

   

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

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

复制代码 代码如下:

   

点击弹出层

   

    X
        弹出层内容
 

 
 
  <script> <br>        var D = document,m = D.getElementById("J_popup"),con = D.getElementById("J_popup_con"),cl = D.getElementById("J_colse"); <br>        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"})}}) <br>    </script>