基於OO的動畫附加插件,可以實現彈跳、漸隱等動畫效果 分享_javascript技巧

前言：前段時間一直都好忙也就好久沒有寫些東西了，最近手上的事剛好告些段落了，把以前空寫的寫插件都拿出來分享下吧，希望對大家有些幫助，也希望有高手能幫忙指點下我的寫不足和錯誤，一直以來自己寫的東西都是在用，性能方面個人只能盡量靠近問題還很多……真心求指點；
插件簡介：執行漸隱等動畫效果，可以這個插件為一個附加插件可以配合前面我發的一個彈出層等等之類的東西用增加js展示的趣味性，
使用方法：在下面的js代碼裡面前面寫了，大家可以看看直接複製貼上就可以用了有問題可以聯絡我

JS程式碼如下展示方式可以複製下面的HTML查看
[javascript]

複製程式碼 程式碼如下:

/*
 createByTommy_20110525
 emial:@csslife@163.com
 用途：
 執行漸隱等動畫效果
 用途：
 執行漸隱等動畫效果
第一個參數為需要變換物件或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 🎜> = 1 ? i : document.getElementById(i);
    },
    init:function(e,s,callback){
   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)
    },
      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                 if (pos                 } else if (pos                     return (7.5625 * (pos -= (1.5 / 2.75)) * (pos                     return (7.5625 * (pos - = (2.25 / 2.75)) * pos .9375);
                } else {                 } ,
            easeInBack:function(pos){var s = 1.70158;return (pos) * pos * ((s 1) * pos - s);}
}  ;
        return this.tween[f](x);
    },
    findAry:f.底部","左","右","邊距", 「填滿」];
        for(var z in rg){
         >        }
        返回false;
    },
          sty:"width",
            curClass:"",
            maxVal:0,//效果上方
           effect:1//執行效果 ] = s[i];
    },
    setSty:function(x){
        var attr = this.s.sty;
     e.style[attr] = x 'px' ;
            var isIE6 = navigator.appVersion.indexOf("MSIE 6")>-1;
     . .scrollTop 'px ');
        }else if(attr=="不透明度"){
            this. e.style.opacity = x;
            this.e.style.filter = "alpha(opacity=" x*100 ")";
  .s.sty ] = x
        }
    },
    getSty:function(e,s){
   le(e,null )[s];
        return parseInt(val)||0;
    },
    fun:function(f,m,callback){         return e = setInterval(function() {
                c = _this. s.curClass,
                curC = _this.e.className;
               if (z == 1) {
                if (回調&& 回呼類型== '函數')callback();
       .e.style.display= "none")
               if (c!=""&&curC.indexOf(c)        },10) ;
    }
}



這是這個展示js的第一個DEMO1：
[html]




複製程式碼


程式碼如下：

測試標題>

    div,h6 ,body{padding:0;margin:0;}
        div,h6{font:bold 12px/24px 'Tahoma';text-indent:15px;}
    相對寬度. 200px;}
        .car-menu{寬度:200px;背景:#c06;遊標:指針;顏色:#fff;}
    :無;}
        .car-box h6{背景顏色:#f5f5f5;背景圖像:-moz-線性漸變(#f5f5f5,#fff);}
 #   c.填充：50px 15px;}
;
頭>


   

;

   

購物車

;

   

    的購物車;
     

   

;

   

;


    (function(){
        // 線上呼叫這個插件的時候直接呼叫animation.js 這個被壓縮了的
var D = document,carMod = D.getElementById("J_car_mod"),carBox = D.getElementById("J_car_box"),carControl=true;
        // 移入顯示
            var Even = Even || window.event,target = Even.目標|| Even.srcElement;
              !!carControl&&(carObj = new ani(carBox,{maxVal:1,sty:"opacity"}, function(){carControl=false;}));
                        // 移出隱藏
this.onmouseout = function(even){
                var e = 偶數| |。 reltg.parentNode;}        
                if(reltg != (carObj1 = new ani(carBox,{maxVal:0,sty:"opacity"},function(){carControl=true;} )；
                    carObj1 = null;
      }
        }

    })()

身體>




這個是基於前面的那個彈出層的demo版本的效果，這個效果必須複製前面的彈出層的js哦部分代碼如下
[html]

複製程式碼

程式碼如下：