How to write a universal JavaScript effects library

The most basic dynamic effects of JavaScript are dynamically changing size, moving position, changing transparency, changing color, etc. And some other more dazzling effects are nothing more than the combination and application of these most basic effects.

There are already many excellent Javascript libraries or effect libraries on the Internet. Do we need to reinvent the wheel? Looking around, Yahoo UI, Prototype-based scriptaculous, Rico, JQuery, Dojo, and many more. These libraries all come with very good and excellent dynamic effects. We can use it directly. But for some small and medium-sized projects that only occasionally use one or two special effects, there is no need to reference the entire framework. You must know that these guys are not small in size. prototype.js 50K, scripttaculous's effects.js also has 40-50k dojo ,yui is bigger.

In most cases we need a small, independent (within 300 lines of code), non-invasive effect library. . Even if there are existing wheels, we not only need to learn how to use the wheels, but also how to build a wheel with our own hands. Based on the above reasons, today we will rewrite a flexible, scalable, compact, cross-browser dynamic effects library.

Considering the extensive user base of prototype.js, part of my code references prototype.js. Of course, I said, we want to be an independent
effects library, even in Make the code work properly even without prototype.js.

Do some preparations first. The following code is essential in any effects library, because it is responsible for some basic work such as obtaining position coordinates,
settings, obtaining the transparency of the element, etc.

The code is as follows:

/*  
    这个函数的代码来自 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          
    }  
}

For more related tutorials, please visit JavaScript video tutorial