发表:2016-07-07 18:59
作者:loeyae@gmail.com
$.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']
})