JQuery百叶窗插件


$.extend($.fn.transitions.action, {
    louver:function($id,$crnt){
        var offset = $crnt.position();
        var _class = $crnt.attr('class');
        var _idclass = $id.attr('class');
        var _css = $crnt.attr('style');
        var _idcss = $crnt.attr('style');
        var _w = $crnt.outerWidth(true);
        var _h = $crnt.outerHeight(true);
        var w = $crnt.width();
        var h = $crnt.height();
        var _html = $crnt.html();
        var _idhtml = $id.html();
        var html = '', idhtml = '';
        if($('#transitions_louver').size())
            $('#transitions_louver').remove();
        if($('#transitions_louver_s').size())
            $('#transitions_louver_s').remove();
        var action = $.fn.transitions.opts.louverAction, type=$.fn.transitions.opts.louverType;
        if($.fn.transitions.opts.louverRand){
            var r = Math.floor(Math.random()*1000/Math.ceil(1000/$.fn.transitions.opts.louverRandAction.length));
            action = $.fn.transitions.opts.louverRandAction[r];
            var num = Math.random()*1000;
            if(num>500){
                type = 'list';
            }
        }
        for(var i = 0; i < $.fn.transitions.opts.louverNum; i++){
            var css = $.fn.transitions.louver.getCss(i,type,$.fn.transitions.opts.louverNum,_w,_h,offset,_css);
            html += '<div style="'+ css[0] +'" class="transitions_louver_child">'+ '<div '+ (_class ? (' class="'+ _class +'"') : '') + ' style="'+ css[1] +'">'+ _html +'</div></div>';
            var idcss = $.fn.transitions.louver.getCss(i,type,$.fn.transitions.opts.louverNum,_w,_h,offset,_idcss);
            idhtml += '<div style="'+ idcss[0] +'" class="transitions_louver_child_s" style="display:none;">'+ '<div '+ (_idclass ? (' class="'+ _idclass +'"') : '') + ' style="'+ idcss[1] +'">'+ _idhtml +'</div></div>';
        }
        var a = $('<div>'+ html +'</div>').appendTo($.fn.transitions.opts.body).attr({
            'id':'transitions_louver'
        }).css(offset).css({
            'position':$crnt.css('position'),
            width:_w,
            height:_h,
            zIndex:100
        }).show();
        a.find($.fn.transitions.opts.cont).css({
            width:w,
            height:h
        }).show();
        var b =  $('<div>'+ idhtml +'</div>').appendTo($.fn.transitions.opts.body).attr({
            'id':'transitions_louver_s'
        }).css(offset).css({
            'position':$crnt.css('position'),
            width:_w,
            height:_h,
            zIndex:99
        }).show();
        b.find($.fn.transitions.opts.cont).css({
            width:w,
            height:h
        });
        $crnt.hide();
        if($.fn.transitions.opts.first){
            $.fn.transitions.first.css('zIndex',1);
            $.fn.transitions.first.show();
        }
        $.fn.transitions.louver.action(action,0,$.fn.transitions.opts.louverNum,$id,$crnt);
        return false;
    }
})
$.extend($.fn.transitions,{
    louver:{
        getCss:function(i,t,n,w,h,offset,_css){
            var css = 'position:absolute;overflow:hidden;';
            _css += ((_css && _css.substr(-1) != ';') ? ';position: absolute;' : 'position: absolute;');
            switch(t){
                case 'row':
                    var _h = ((i == n-1) ? (h - i * Math.ceil(h/n)) : Math.ceil(h/n));
                    css += 'height:'+ _h +'px;';
                    css += 'width:'+ w +'px;';
                    css += 'left:'+ offset.left +'px;';
                    css += 'top:'+ (offset.top + ((i == n-1) ? (h - _h) : i * _h)) +'px;';
                    _css += 'left:0px;';
                    _css += 'top:'+ (0-(offset.top + ((i == n-1) ? (h - _h) : i * _h))) +'px;';
                    break;
                default:
                    var _w = ((i==n-1) ? (w - i * Math.ceil(w/n))  : Math.ceil(w/n));
                    css += 'height:'+ h +'px;';
                    css += 'width:'+ _w +'px;';
                    css += 'left:'+ (offset.left + ((i == n-1) ? (w - _w) : i * _w)) +'px;';
                    css += 'top:'+ offset.top +'px;';
                    _css += 'top:0px;';
                    _css += 'left:'+ (0-(offset.left + ((i == n-1) ? (w - _w) : i * _w))) +'px;';
                    break;
            }
            return [css,_css];
        },
        action:function(action,i,n,$id,$crnt){
            i = i || 0;
            if(i >= n) {
                $("#transitions_louver").remove();
                $("#transitions_louver_s").remove();
                $.fn.transitions.first.attr('style',$.fn.transitions.first.data('css'));
                $.fn.transitions.first.hide();
                $id.show();
                $.fn.transitions.clear();
                return false;
            }
            $this = $('.transitions_louver_child').eq(i);
            var data = {},sdata = {};
            switch(action){
                case 'top':
                    data.top = parseInt($this.css('top')) - $this.height();
                    sdata.top = parseInt($this.css('top'));
                    break;
                case 'bottom':
                    data.top = parseInt($this.css('top')) + $this.height();
                    sdata.top = parseInt($this.css('top'));
                    break;
                case 'left':
                    data.left = parseInt($this.css('left')) - $this.width();
                    sdata.left = parseInt($this.css('left'));
                    break;
                case 'right':
                    data.left = parseInt($this.css('left')) + $this.width();
                    sdata.left = parseInt($this.css('left'));
                    break;
                case 'width':
                    data.width = 0;
                    sdata.width = $this.width();
                    break;
                case 'height':
                    data.height = 0;
                    sdata.height = $this.height();
                    break;
                case 'opacity':
                    data.opacity = 0;
                    sdata.opacity = 1;
                    break;
                default:
                    $.fn.transitions.clear();
                    return false;
                    break;
            }
            var $sthis = $(".transitions_louver_child_s").eq(i);
            if(!($.fn.transitions.opts.first && $id.is($.fn.transitions.first)))
                $sthis.css(data).show();
            $this.animate(data,$.fn.transitions.opts.louverSpeed,function(){
                $this.hide();
                i++;
                if(i<n){
                    $.fn.transitions.louver.action(action,i,n,$id,$crnt);
                }
                if($.fn.transitions.opts.first && $id.is($.fn.transitions.first)){
                    if( i >= n){
                        $("#transitions_louver").remove();
                        $("#transitions_louver_s").remove();
                        $.fn.transitions.first.attr('style',$.fn.transitions.first.data('css'));
                        $.fn.transitions.first.hide();
                        $id.show();
                        $.fn.transitions.clear();
                    }
                }
                else{
                    $sthis.animate(sdata,$.fn.transitions.opts.louverSpeed,function(){
                        if( i >= n){
                            $("#transitions_louver").remove();
                            $("#transitions_louver_s").remove();
                            $.fn.transitions.first.attr('style',$.fn.transitions.first.data('css'));
                            $.fn.transitions.first.hide();
                            $id.show();
                            $.fn.transitions.clear();
                        }
                    })
                }
                return false;
            });
            return false;
        }
    }
})
$.extend($.fn.transitions.defaults, {
    louverRandom        : 60,
    louverNum           : 5,
    louverSpeed         : 200,
    louverAction        : 'top',
    louverType          : 'row',
    louverRand          : false,
    louverRandAction    : ['top','bottom','left','right','width','height','opacity']
})