Go_Rush(阿舜)的博客,专注于Ajax,JavaScript

续上回:  怎样写一个通用的JavaScript效果库！(1/2) 

在上个随笔中贴出了效果库的整体框架，和一个简单的opacity插件. 今天这个随笔主要是扩展其他常用
效果插件，毕竟框架只能是个空壳，内容还是要自己充实。
如果看过了我上篇的实现细节，这里就不多说废话了，来段代码先：


这里 effect.setting 是非常有用而且非常重要的冬冬，所有的通过options传进来自定义函数都可以
通过effect.setting来获取element最初的设置。 在很多场合，我们需要在 options 中传一个 onComplete
函数进来， 用来在效果执行完毕后，打扫战场，恢复一些设置。
这些效果是可以重叠的，大家可以看看下面我写的例子。

写了十来个例子，应该很详细了。

完整的，可调试代码和例子如下：

全部代码附范例
<script language="javascript">
/**//*
    这个函数的代码来自 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('alpha').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        
    }
}


Effect        =Class.create();
Effect.Fn    =new Object();
Effect.Init =new Object();

Effect.prototype={
    //by Go_Rush(阿舜) from http://ashun.cnblogs.com/
    
    initialize: function(element,options) {
        this.element  = $(element);
            this.options  = options || {};
         this.duration = (this.options.duration || 2) * 1000;   //效果执行时间
        this.fps      = this.options.fps || 50;                 //频率
           this.steps    = Math.floor(this.duration/this.fps);   //当前步长，注： 这个变量是递减的，当它0的时候意味着整个效果结束
        this.maxSteps = this.steps;             //整个效果的步长
        this.setting  = new Object();  
        this.timer    = null;        

           if (this.options.delay){    // 延时处理
             var _this=this;
             setTimeout(function(){
                 _this.setup(_this);
                (_this.options.onStart || Prototype.emptyFunction)(_this);
                 _this.run();
                }, _this.options.delay*1000);
        }else{
            this.setup(this);
            (this.options.onStart || Prototype.emptyFunction)(this);        
            this.run();      
        }
   },
   run: function() {
        if (this.isFinished())  return (this.options.onComplete || Prototype.emptyFunction)(this);
        if (this.timer)   clearTimeout(this.timer);
        this.duration -= this.fps;
        this.steps--;                           
        var pos=1-this.steps/this.maxSteps    ;    //总进度的百分比
        this.loop(this,pos);    
        (this.options.onUpdate || Prototype.emptyFunction)(this,pos);      
        this.timer = setTimeout(this.run.bind(this), this.fps);
   },
   isFinished: function()