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 < (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))
반환(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)<0)_this.e.className = c;
              clearInterval(e)
           }
        },10);
    }
}

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

[html]

复主代码 代码如下:

<머리>


<스타일>
    div,h6,body{padding:0;margin:0;}
        div,h6{font:bold 12px/24px 'Tahoma';text-indent:15px;}
    .car-mod{ 위치:상대적;너비:200px;}
        .car-menu{너비:200px;배경:#c06;cursor:pointer;color:#fff;}
        .car-box{테두리:2px 솔리드 #c06 ;너비:300px;디스플레이:없음;}
        .car-box h6{배경-색상:#f5f5f5;배경-이미지:-moz-linear-gradient(#f5f5f5,#fff);}
        .things {border-top:1px solid #ccc;padding:50px 15px;}



<본문>
   

   

购物车

   

     

나의 보물

     

   

   

<스크립트>
    (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 = 짝수 | | Window.Event, eltg = e. RelatedTarget? reltg.parentNode;}        
                if(reltg != this){
                  !carControl&&(carObj1 = new ani(carBox,{maxVal:0,sty:"opacity"},function(){carControl=true;} )));
                   carObj1 = null;
               }
            }
        }

    })()

复主代码

代码如下:

<머리>


<스타일>
    div{padding:0;margin:0;}
    .wra{margin:0 auto;width:1000px;overflow:hidden;}
    .menu{border:1px solid #ccc;배경:# 000;색상:#fff;너비:250px;높이:30px;글꼴:14px/30px '微软雅黑';text-align:center;text-shadow:1px 1px 2px #f5f5f5;cursor:pointer;}
.con{border:1px solid #000;배경:#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 easy-in 0s;}
    .close:hover{-moz-transform:rotate(360deg);}

<스타일>



<본문>

   

点击弹出层

   

    X
        弹 Out层内容
 

 
 
  <스크립트>
        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"})}})
   

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.