Javascript动画系列之 —— lightbox实现（二）

　　上次帖子里详细描述了lightbox实现思路，本想将整个原生的lightbox源码放出来，但是觉得留点思考的余地更好。

　　本文中就贴上淡入淡出和滑动的JS原生代码，通过测试，能兼容IE8、Firefox、Chrome。

function bind(fn, context){　　//函数绑定，传递context上下文
    var args = Array.prototype.slice.call(arguments, 2);
    return function(){
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = args.concat(innerArgs);　　//柯里化参数
        return fn.apply(context, finalArgs);
    };
}
var addEvent = function(ele, event, fn){　　//添加事件兼容
    ele.addEventListener ? ele.addEventListener(event, fn, false) :
    ele.attachEvent ? ele.attachEvent("on" + event, fn) : (ele["on" + event] = fn);
};
var animation = {
    config: {　　　　//参数
        interval: 17,
        show: true,
        distance: 0,
        distanceW: 0                
    },
    calculate: function(strSpeed, height, width){　　　　//几种模式不同的算法
        var speed = this.speedFn(strSpeed),
            i = this.config.interval;
        return typeof height === "undefined" && typeof width === "undefined" ?
        {
            frames: (speed - 0) / i,
            step: i / (speed - 0)
        } : {
            frames: (speed - 0) / i,
            step: i * height / (speed - 0),
            stepw: i * width / (speed - 0)
        }
    },
    trim: function(str){　　　　//去掉两头空格，测试过速度相比其他trim方法快很多
        //return str.replace(/^\s*/, '').replace(/\s*$/, '');
        return str.replace(/^\s*|\s*$/, '');
    },
    speedFn: function(strSpeed){
        strSpeed = (this.trim(strSpeed)).toLowerCase();
        switch(strSpeed){
            case "fastest":
                return 400;
            case "faster":
                return 500;
            case "fast":
                return 600;
            case "normal":
                return 700;
            case "slow":
                return 800;
            case "slower":
                return 900;
            case "slowest":
                return 1000;
            case "debug":
                return 2000;
            default:
                return 500;
        }
    },
    fadeOut: function(ele, strSpeed){                    
        var count = 0, c = this.config, s = ele.style,
            m$ = this.calculate(strSpeed);
        ele.currentStyle ? (s.filter = "alpha(opacity=100)") : s.opacity = 1;

        try{
            setTimeout(function(){
                count++;
                if(count > m$.frames){                            
                    ele.currentStyle ? (s.filter = "alpha(opacity=0)") : s.opacity = 0;
                }else{
                    if(!ele.currentStyle){
                        s.opacity -= m$.step;
                    }else{
                        var f = parseFloat(ele.currentStyle.filter.match(/\d+/).toString());
                        f -= m$.step * 100;
                        s.filter = "alpha(opacity=" + f + ")";
                    }
                    setTimeout(arguments.callee, c.interval);
                }
            }, c.interval); 
        }catch(ex){
            console.log("fadeOut error, " + ex.message);
        }
        c.show = false;
    },
    fadeIn: function(ele, strSpeed){
        var count = 0, c = this.config, s = ele.style,
            m$ = this.calculate(strSpeed);
        ele.currentStyle ? (s.filter = "alpha(opacity=0)") : s.opacity = 0;

        try{
            setTimeout(function(){
                count++;
                if(count > m$.frames){                            
                    ele.currentStyle ? (s.filter = "alpha(opacity=100)") : s.opacity = 1;
                }else{
                    if(ele.currentStyle){
                        var f = parseFloat(ele.currentStyle.filter.match(/\d+/).toString());
                        f += m$.step * 100;
                        s.filter = "alpha(opacity=" + f + ")";
                    }else{
                        s.opacity = parseFloat(s.opacity) + m$.step;
                    }
                    setTimeout(arguments.callee, c.interval);
                } 
            }, c.interval); 
        }catch(ex){
            console.log("fadeIn error, " + ex.message);
        }
        c.show = true;
    },
    fadeToggle: function(ele, strSpeed){　　　　//淡入淡出切换
        var self = this;
        setTimeout(function(){                        
            self.config.show ? self.fadeOut(ele, strSpeed) : self.fadeIn(ele, strSpeed);
        }, 0);
    },
    slideOut: function(ele, strSpeed){
        var count = 0, u = "px", s = ele.style,
            c = this.config, cs = window.getComputedStyle ? window.getComputedStyle(ele) : ele.currentStyle,
            h = s.height = c.distance = parseFloat(cs["height"]),
            w = s.width = c.distanceW = parseFloat(cs["width"]);

        try{
            var    m$ = this.calculate(strSpeed, h, w);
            setTimeout(function(){
                count++;
                if(count > m$.frames || parseFloat(s.width) < m$.stepw || parseFloat(s.height) < m$.step){
                    s.height = 0;
                    s.width = 0;
                }else{
                    s.height = (parseFloat(s.height) - m$.step) + u;
                    s.width = (parseFloat(s.width) - m$.stepw) + u;
                    setTimeout(arguments.callee, c.interval);
                }
            }, c.interval); 
        }catch(ex)
        {
            console.log("slideOut error, " + ex.message);
        }
        c.show = false;
    },
    slideIn: function(ele, strSpeed){
        var count = 0, u = "px", s = ele.style,
            c = this.config, cs = window.getComputedStyle ? window.getComputedStyle(ele) : ele.currentStyle,
            h = c.distance,
            w = c.distanceW;
        try{
            var    m$ = this.calculate(strSpeed, h, w);
            setTimeout(function(){
                count++;
                if(count > m$.frames || parseFloat(s.width) > c.distanceW || parseFloat(s.height) > c.distance){                            
                    s.height = c.distance + u;
                    s.width = c.distanceW + u;
                }else{
                    s.height = (parseFloat(s.height) + m$.step) + u;
                    s.width = (parseFloat(s.width) + m$.stepw) + u;
                    setTimeout(arguments.callee, c.interval);
                }
            }, c.interval);
        }catch(ex){
            console.log("slideOut error, " + ex.message);
        }
        c.show = true; 
    },
    slideToggle: function(ele, strSpeed){
        this.config.show ? this.slideOut(ele, strSpeed) : this.slideIn(ele, strSpeed);
    }
};

addEvent(btn, "click", bind(animation.fadeToggle, animation, element, "normal"));　　//最后调用

　　代码还算清晰，主要的难点在于绑定的理解和兼容性的问题。