Share_javascript 스킬 등의 애니메이션 효과를 얻을 수 있는 OO 기반의 애니메이션 애드온 플러그인입니다.

서문: 얼마 전부터 너무 바빠서 오랫동안 글을 쓰지 못했습니다. 최근에 쓸 일이 없어져서 글쓰기 플러그인을 모두 꺼내서 공유하겠습니다. 제가 과거에 쓴 글이 모든 분들께 도움이 되기를 바랍니다. 또한 제가 쓴 글의 부족한 부분과 오류를 지적하는 데 도움이 되기를 바랍니다. 최대한 가까워지려고 노력했지만 여전히 문제가 많습니다... 진심으로 조언을 구합니다.
플러그인 소개: Execution Fade 및 기타 애니메이션 효과, 이 플러그인은 추가 플러그인으로 사용할 수 있습니다. , 앞서 게시한 팝업 레이어 등과 함께 사용하면 js 표시의 재미를 높일 수 있습니다.
사용 방법: 다음 js 코드를 작성합니다. 예, 살펴보고 복사하여 붙여넣으면 됩니다. 궁금하신 점은 연락주세요 >

코드복사

코드는 다음과 같습니다

/*
createByTommy_20110525
emial:@csslife@163.com
목적:
페이드 아웃 및 기타 애니메이션 효과 수행
수신 매개변수 설명:
1 . 첫 번째 매개변수는 변환해야 하는 개체 또는 ID입니다.
2. 두 번째 매개변수는 다음을 포함하는 개체입니다.
1) 변환된 개체에서 변경해야 하는 속성입니다. 기본값은 너비를 변경하는 것입니다(scrollTop 등의 비스타일 속성도 전달할 수 있음)
2), curClass-> 변환 객체가 변경된 후 추가해야 하는 현재 클래스, 기본값 비어 있음
3), maxVal-> 변경의 최대값, 기본값은 0입니다(curClass가 너비 및 높이와 같은 스타일 속성인 경우 숨김을 의미함). 속성 값이 될 때 애니메이션을 중지합니다. 변경 도달
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||{}); maxS = parsInt(this.s.maxVal),speed = maxS==0?Math.max(this.getSty(this.e,this.s .sty),1):maxS/5
this.fun; (속도,maxS,콜백)
},
공식:함수(x){
var f
스위치( this.s.효과){
사례 0:
f; = "outQuad";
중단;
사례 1:
f = "inQuad";
사례 2:
                                                                    > this.tween ={
outQuad: function(pos){return Math.pow(pos, 2)},//outQuad
inQuad:function(pos){return -(Math.pow((pos-1),2)-1)},/ /inQuad
바운스:함수(pos){//bounce
if (pos return (7.5625 * pos * pos)
} else if (pos Return (7.5625 * (POS- = (1.5 / 2.75)) * POS.75)
} else if (pos & lt; (2.5 / 2.75))
반환(7.5625 * (pos -= (2.25 / 2.75)) * pos .9375));
                                         ~;
        return this.tween[f](x);
    },
    findAry:function(attr){
        var rg = ["너비","높이","위쪽","아래쪽","왼쪽","오른쪽","여백", "심"];
        for(var z in rg){
            if(rg[z]==attr) return true;
        }
        false를 반환합니다.
    },
    setInit:function(s){
        this.s = {
            sty:"width",
            curClass:"",
           maxVal:0,//效果最大值
            효과: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.getCompulatedStyle(e,null)[s];
        returnparseInt(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 (콜백 && 콜백 유형 == '함수') 콜백();
               _this.s.maxVal==0&(_this.e.getAttribute("style"))&&(_this.e.style.display="none"); (c!=""&&curC.indexOf(c)              clearInterval(e)
           }
        },10);
    }
}

这是这个js 전시회示的第一个DEMO1:

[html]

复主代码 代码如下: