Share_javascript 스킬 등의 애니메이션 효과를 얻을 수 있는 OO 기반의 애니메이션 애드온 플러그인입니다.-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 17:31:27

원래의

1107명이 탐색했습니다.

서문: 얼마 전부터 너무 바빠서 오랫동안 글을 쓰지 못했습니다. 최근에 쓸 일이 없어져서 글쓰기 플러그인을 모두 꺼내서 공유하겠습니다. 제가 과거에 쓴 글이 모든 분들께 도움이 되기를 바랍니다. 또한 제가 쓴 글의 부족한 부분과 오류를 지적하는 데 도움이 되기를 바랍니다. 최대한 가까워지려고 노력했지만 여전히 문제가 많습니다... 진심으로 조언을 구합니다.
플러그인 소개: 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"})}})