首頁 > web前端 > js教程 > 利用jq讓你的div居中的好方法分享_jquery

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

WBOY
發布: 2016-05-16 17:13:06
原創
1812 人瀏覽過

很簡短的版本:

複製程式碼程式碼如下:


程式碼如下:

$(' 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});
    });
);
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板