jQuery |中心對象上的窗口大小調整

Question

用下面的函數我在窗口中心的對象，如果用戶選擇這樣：

var showObj = function(obj) { 

    setTimeout(function() { 
     if(opts.centerObj == true) { 
      var cssProps = { 
       'position' :'absolute', 
       'top' : (($(window).height() - $(obj).outerHeight())/2)+'px', 
       'left' : (($(window).width() - $(obj).outerWidth())/2)+'px' 
      } 
      obj.css(cssProps).fadeIn('slow'); 
     } 
      else { 
       obj.fadeIn('slow'); 
      } 
    }, 1500); 

} 

但我要調整此功能，或者使一個又一個，如果窗口，將集中的對象調整大小。

我見過我可以用這個：

$(window).resize(function() { 
    obj.css(cssProps); 
}); 

但我認爲我錯了，因爲當我調整窗口的大小沒有任何反應。

所以，有人可以告訴我如何創建那個我需要的功能或調整當前的功能，所以它呢？

Answer 1

這取決於你在呼喚cssProps。由於它在一個私人函數內，除非你聲明它是不可訪問的。我認爲做你想做的最簡單的方法是取出創建JS對象的代碼並將其放入它自己的函數中。

var showObj = function(obj) { 

    setTimeout(function() { 
     if(opts.centerObj == true) { 
      var cssProps = getProps(obj); 
      obj.css(cssProps).fadeIn('slow'); 
     } 
     else { 
      obj.fadeIn('slow'); 
     } 
    }, 1500); 

} 

var getProps = function(obj) { 

    return { 
     'position' :'absolute', 
     'top' : (($(window).height() - $(obj).outerHeight())/2)+'px', 
     'left' : (($(window).width() - $(obj).outerWidth())/2)+'px' 
    } 
} 

$(window).resize(function() { 
    var cssProps = getProps(obj); 
    obj.css(cssProps); 
}); 

Answer 2

這個問題被問和之前刪除和here is my solution_{^（僅10K）}

jQuery.fn.center = function() { 

    var $self = $(this), _self = this; 
    var window_resize = function(){ 
     var window_obj = $(window); 
     $self.css({ 
      "position": "absolute", 
      "top": ((window_obj.height() - _self.outerHeight())/2), 
      "left": ((window_obj.width() - _self.outerWidth())/2) 
     }); 
    } 
    $self.bind('centerit', window_resize).trigger('centerit'); 
    $(window).bind('resize', function(){ 
     $self.trigger('centerit'); 
    }); 
    return _self; 

} 


$('div').center(); 

小提琴：http://jsfiddle.net/maniator/JeBHJ/