범용 JavaScript 효과 라이브러리를 작성하는 방법! (2/2)_자바스크립트 실력

이전 에세이에서는 효과 라이브러리의 전체 프레임워크와 간단한 불투명도 플러그인에 대해 포스팅했는데, 오늘의 에세이는 주로 일반적으로 사용되는
효과 플러그인 확장에 관한 것입니다. 결국 프레임워크는 빈 쉘일 수 밖에 없습니다. , 콘텐츠는 여전히 직접 보강해야 합니다.
이전 기사의 구현 세부 사항을 읽었다면 여기서 말도 안되는 이야기는 하지 않겠습니다. 코드부터 시작하겠습니다.

코드 복사 코드는 다음과 같습니다.

/**//************************************************ ****/
// Move, 여기서 move to는 x, y로 이동한다는 의미입니다. 물론 x 픽셀을 이동하기 위해 이동을 확장할 수도 있습니다.
효과 .Init.move=function(효과){ //초기화
if (효과.options.x!==정의되지 않음 || effect.options.y!==정의되지 않음){ var pos=Position.cumulativeOffset( effect. 요소);
effect.setting.left =pos[0];
effect.setting.top =pos[1]
effect.setting.position = effect.element.style.position; > effect.element.style.position ="absolute"
effect.options.x=( effect.options.x===undefine)? effect.setting.left: effect.options.x
효과. options.y=( effect.options.y=== 정의되지 않음)? effect.setting.top : effect.options.y;                                                ,pos){ //효과
if ( effect.options.x=== 정의되지 않음 & & effect.options.y===정의되지 않음) return
effect.element.style.left=효과.setting.left ( effect.options.x- effect.setting.left) * pos "px"
효과; .element.style.top =효과.설정.top(효과.옵션.y-효과.설정.top) * pos " px"
}
/**//************************************************ ****/

/**//************************************************ ****/
// http://ashun .cnblogs.com/ 에서 Go_Rush(Ah Shun)로 확대
Effect.Init.zoom=function(효과){
effect.setting.zoom = effect.element.style.zoom || 1;
// Firefox는 CSS 확대/축소를 지원하지 않습니다.
대신 너비와 높이를 변경하는 방법을 사용합니다. if ( effect.options.zoom!= =정의되지 않음 && navigator.userAgent.toLowerCase().indexOf('firefox') != -1){ w=효과.요소.offsetWidth * effect.options.zoom;
effect.options.h=효과.요소. offsetHeight * effect.options.zoom;
}
}
Effect.Fn.zoom=function(효과,pos){
if (효과.options.zoom===undefine) return; 🎜> effect.element.style.zoom=효과.setting.zoom (효과.options.zoom-효과 .setting.zoom)*pos
} 
/**//************************************************ ****/ 
/**//************************************************ ****/ 
// size  同上,是 size to, 改变到指定大小 by Go_Rush(阿舜) from http://ashun .cnblogs.com/ 
Effect.Init.size=function(효과){ 
    if ( effect.options.w!== 정의되지 않음 ||  effect.options.h!== 정의되지 않음 ){ 
        효과 .setting.overflow   =효과.element.style.overflow || '보이는'; 
        효과.설정.폭      =효과.요소.offsetWidth; 
        효과.설정.높이      =효과.요소.오프셋 높이;  
         effect.element.style.overflow ="hidden"     
         effect.options.w=( effect.options.w=== un Defined )? effect.setting.width : effect.options.w; 
        효과.옵션.h=(효과.옵션.h===정의되지 않음)?효과.설정.높이:효과.옵션.h;             
    } 
} 
Effect.Fn.size=function(효과,pos){     
    if ( effect.options.w=== 정의되지 않음 &&  effect.options.h=== 정의되지 않음 ) return ; 
    효과.요소.스타일.폭 =효과.설정.폭   (효과.옵션.w-효과.설정.폭 ) * pos  "px"; 
     effect.element.style.height= effect.setting.height  ( effect.options.h- effect.setting.height ) * pos  "px"; 
} 
/**//************************************************ ****/ 
/**//************************************************ ****/ 
// 背景color by Go_Rush(阿舜), http://ashun.cnblogs.com/
Effect.Init.bgcolor=function(효과){ 
    if (효과.options.bgcolor!==정의되지 않음 && /^#?[a-f0-9]{6}$/i.test(효과 .options.bgcolor)){ 
        var color =효과.element.style.BackgroundColor || "#ffffff"; 
        //FireFox 下,即使css样式设置背景为 #ffffff格式,但程序取到的是 rgb(255,255,255)格式, 这里抻䊊转 화为 #ffffff格式 
        if (/rgb/i.test( color)){              //"rgb(255, 0, 255)" 
            //var arr=color.replace(/[rgb(s)]/gi,"").split(",") 
            var arr=eval(color.replace("rgb","new Array"))        
            color="#" Number(arr[0]).toColorPart() Number(arr[1]).toColorPart() Number(arr[2]).toColorPart() 
        } 
         effect.setting.bgcolor=color 
    } 
} 
Effect.Fn.bgcolor=function(효과, pos){     
    if ( effect.options.bgcolor===undefine) return; 
    var c1=효과.설정.bgcolor,c2=효과.options.bgcolor 
    var arr1=[parseInt(c1.slice(1,3),16),parseInt(c1.slice(3,5) ,16),parseInt(c1.slice(5),16)] 
    var arr2=[parseInt(c2.slice(1,3),16),parseInt(c2.slice(3,5),16) ,parseInt(c2.slice(5),16)] 
    var r=Math.round(arr1[0] (arr2[0]-arr1[0])*pos) 
    var g=Math.round (arr1[1] (arr2[1]-arr1[1])*pos) 
    var b=Math.round(arr1[2] (arr2[2]-arr1[2])*pos) 
effect.element.style.BackgroundColor="#" r.toColorPart() g.toColorPart() b.toColorPart() 
}
/**//************************************************ ****/
/**//************************************************ ****/
// 이 글은 지난번에 Go_Rush(A Shun)가 http://ashun.cnblogs com에 게시한 것입니다. /
Effect.Init.opacity=function(효과){
if (효과.options.opacity===undefine) return
effect.setting.opacity=Opacity(효과.element); >}
Effect.Fn.opacity=function(효과,pos){
if ( effect.options.opacity===undefine) return
Opacity( effect.element, effect.setting.opacity ( effect.options.opacity- effect.setting.opacity)*pos); 
}
/**//************************************************ ****/

여기서 effect.setting은 매우 유용하며 매우 중요합니다. , 옵션을 통해 전달된 모든 사용자 정의 함수는
effect.setting을 통해 요소의 초기 설정을 얻을 수 있습니다. 많은 경우 전장을 정리하고 효과가 실행된 후 일부 설정을 복원하기 위해 옵션에 onComplete
함수를 전달해야 합니다.
이러한 효과는 겹칠 수 있습니다. 아래에 제가 작성한 예를 살펴보세요.
10개 정도의 예시를 썼는데, 매우 상세해야 합니다.
디버깅 가능한 전체 코드와 예제는 다음과 같습니다.

<fieldset> <legend>단일 효과</legend> <button onclick="javascript:foo1()">컬러 foo1</button> <button onclick="javascript:foo2()">크고 작은 foo2</button> <button onclick="javascript:foo3()"> 위치 foo3</button> <button onclick="javascript:foo4()">투명성 foo4</button> <button onclick="javascript:foo5()">Foo5 확대</button> <button onclick="javascript:foo6()">foo6 전체</button> </fieldset> <fieldset> <legend>복합효과</legend> <button onclick="javascript:fix1()">페이드아웃 수정1</button> <button onclick="javascript:fix2()"> 접어서 수정2</button> <button onclick="javascript:fix3()"> 점점 작아지고 사라지는 수정3</button> <button onclick="javascript:fix4()"> 서서히 작아지고 사라지다 2 fix4</button> <button onclick="javascript:fix5()"> 색상 변경 수정5</button> <button onclick="javascript:fix6()"> 진동 5회 수정6</button> </fieldset> <button onclick="javascript:location.reload()"> 각 효과 후 복원하려면 여기를 클릭하세요 </button> 참고 FireFox는 Zoom을 지원하지 않습니다. <div id="div1" style="border:1px solid red;width:300px;height:150px;overflow:hidden;position:absolute;left:300px;top:200px;z-index:2;background-color:#ffffff"> <a href="http://ashun.cnblogs.com/">Go_Rush(아슌)</a> <img src="/static/imghwm/default1.png" data-src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="범용 JavaScript 효과 라이브러리를 작성하는 방법! (2/2)_자바스크립트 실력" > </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]