利用jq讓你的div居中的好方法分享

利用jq讓你的div居中的好方法分享_jquery

WBOY

發布： 2016-05-16 17:13:06

原創

1823 人瀏覽過

很簡短的版本：

複製程式碼程式碼如下：

程式碼如下：

$(' myDiv ').css({top:'50%',left:'50%',margin:'-' ($('#myDiv').height() / 2) 'px 0 0 -' ($( ' #myDiv').width() / 2) 'px'});

簡短版本：

複製程式碼

程式碼如下：


(f .extend({
        center: function () {
            return this.each(function .height() - $(this).outerHeight()) / 2;
               position:'absolute', margin: 0，頂部：（上> 0 ？上：0）'px'，左：(左> 0 ？左：0）'px'});
            });
          });
         } ); 
})(jQuery);

透過此程式碼啟動：
$('#mainDiv').center();

外掛程式版本

複製程式碼

程式碼如下：

(function($){
     $.fn.extend({
          center: extend({ // 預設值
 inside:window, // 元素，居中進入窗口
                    transition: 0, // 毫秒 ，左側最小元素值
                    minY:0, // 像素,最小頂部元素值
                    withScrolling:true, // booleen, 處理滾動條(scrollTop)                    在 Horizo​​​​ntal:true // booleen, 置中水準
               }, options);
                  var props = {position:'absolute'};
                         var top = ($ (options.inside).height() - $(this).outerHeight()) / 2;

                         top = (top > options.min      $.extend(props, {top: top 'px'});
                   horizo ntal) {
                          var left = ($(options.inside).wid(                   if (options.withScrolling) left = $(options.horizo內).scrollLeft() || 0;
                                           $.extend(props, {left: left 'px'} );
                    }
           );
                    else $(this).css(props);
       (this);
               }); 
          }

透過此程式碼啟動：




複製程式碼


程式碼如下：


$(document).ready(function(){
    $('#mainDiv').center();
    $(window).bind('resize', function() { 
        $('#mainDiv').center({transition:300});
    });
);