범용 JavaScript 효과 라이브러리를 작성하는 방법

자바스크립트의 가장 기본적인 동적 효과는 동적으로 크기 변경, 위치 이동, 투명도 변경, 색상 변경 등입니다. 그리고 또 다른 눈부신 효과는 이러한 가장 기본적인 효과의 조합과 적용에 지나지 않습니다.

인터넷에는 이미 훌륭한 Javascript 라이브러리나 효과 라이브러리가 많이 있습니다. 바퀴를 다시 만들어야 할까요? Yahoo UI, Prototype 기반 scriptaculous, Rico, JQuery, Dojo 등을 둘러보세요. 이 라이브러리는 모두 매우 훌륭하고 뛰어난 동적 효과를 제공합니다. 우리는 그것을 직접 사용할 수 있습니다. 하지만 가끔 특수 효과를 한두 개만 사용하는 일부 중소 규모 프로젝트의 경우 전체 프레임워크를 참조할 필요가 없습니다. 이 녀석들은 크기가 작지 않습니다. 도장도 4~5만개 있는데 유이가 더 커요.

대부분의 경우 작고 독립적인(코드 300줄 이내) 비침습적 효과 라이브러리가 필요합니다. .기존 바퀴가 있더라도 바퀴 사용법뿐만 아니라 우리 손으로 바퀴를 만드는 방법도 배워야합니다. 위의 이유를 바탕으로 오늘 우리는 유연하고 확장 가능하며 컴팩트한 크로스 브라우저 동적 효과 라이브러리를 다시 작성하겠습니다.

Prototype.js의 광범위한 사용자 기반을 고려하면 내 코드의 일부가 프로토타입.js를 참조합니다. 물론 Make the 프로토타입.js가 없어도 코드가 제대로 작동합니다.

먼저 준비를 하세요. 다음 코드는 위치 좌표 획득,

설정, 요소 투명도 획득 등과 같은 일부 기본 작업을 담당하기 때문에 모든 효과 라이브러리에 필수적입니다.

코드는 다음과 같습니다.

/*  
    这个函数的代码来自 Prototype.js  http://prototype.conio.net/  
    如果页面引用了prototype.js ,则可以删除下面这个函数,  
    当然,即使不删除也没关系,因为作了简单的兼容性判断  
*/  
(function(){     
    if     (!("Prototype" in window)){  
        Prototype={emptyFunction:function(){}};  
        Class ={  
            create: function(){return function(){this.initialize.apply(this, arguments)}}  
        };          
        $ = function(element){  
            return typeof(element)=="string"?document.getElementById(element):element  
        };  
        $A= function(arrLike){  
            for(var i=0,ret=[];i<arrLike.length;i++) ret[i]=arrLike[i];  
            return ret  
        };      
        Number.prototype.toColorPart =function(){return String("00"+this.toString(16)).slice(-2)};          
        Function.prototype.bind = function() {  
             var __method = this, args = $A(arguments), object = args.shift();  
            return function(){return __method.apply(object, args.concat($A(arguments)))}  
        }  
        Position={   
             cumulativeOffset: function(element) {  
                var valueT = 0, valueL = 0;  
                do {  
                  valueT += element.offsetTop  || 0;  
                  valueL += element.offsetLeft || 0;  
                  element = element.offsetParent;  
                } while (element);  
                return [valueL, valueT];  
            }  
        }          
    }  
})()  
/*  
    1.读取/设置 透明度,  
    2.如果只传了一个参数element,则返回 element的透明度 (0<value<1)  
    3.如果传了两个参数 element和value 则把element的透明度设置为value  value范围 0-1  
*/  
function Opacity(element,value){  
// by Go_Rush(阿舜) from http://ashun.cnblogs.com/  
    var ret;  
    if (value===undefined){   //读取  
        if (!/msie/i.test(navigator.userAgent))  
            if (ret=element.style.opacity) return parseFloat(ret);            
        try{return element.filters.item(&#39;alpha&#39;).opacity/100}catch(x){return 1.0}  
    }else{                   //设置          
        value=Math.min(Math.max(value,0.00001),0.999999)    //这句修复一些非ie浏览器opacity不能设置为1的bug  
        if (/msie/i.test(navigator.userAgent)) return element.style.filter="alpha(opacity="+value*100+")"  
        return element.style.opacity=value          
    }  
}

더 많은 관련 튜토리얼을 보려면

JavaScript 비디오 튜토리얼을 방문하세요.