jquery div 居中技巧應用介紹_jquery

很短的版本：
[html]

複製程式碼 程式碼如下：

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


簡短版本：[html]

複製程式碼程式碼如下： 🎜>(function($){ $.fn.extend({ center: function () {

return this.each(function() {

var top = ( $(window) .height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2; 🎜>$(this ).css({position:'absolute', margin:0, top: (top > 0 ? top : 0) 'px', left: (left > 0 ? left : 0) 'px '});
});
}
});
(function($){
$.fn.extend({
center: function () {
return this.each(function () {
var top = ($(window ).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this ).outerWidth()) /
$ (this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0) 'px', left: (left > 0 ? left : 0) 'px'}) ;
});
}
});


透過此程式碼啟動：




複製程式碼

程式碼如下：

$('#mainDiv').center(); [ javascript]

複製程式碼

程式碼如下：

(function($){ (function($){ (function($){ .fn.extend({ center: function (options) {

var options = $.extend({ // 預設值

inside:window, //元素，中心進入視窗
transition: 0, // 毫秒，過渡時間
minX:0, // 像素，最小左側元素值
minY:0, // 像素，最小頂部元素值
withScrolling:true, // booleen,處理捲軸(scrollTop)
vertical:true, // booleen, 垂直居中
horizo​​ntal:true // booleen, 水平居中
}, options);
return this.each( function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($(options.inside). height() - $(this) .outerHeight()) / 2;
if (options.withScrolling) top = $(options.inside).scrollTop() || 0; options.minY ? top : options.minY);
$.extend (props, {top: top 'px'});
}
if (options.horizo​​ntal) {
var left = ($(options.inside).width() - $( this).outerWidth()) / 2;
if (options.withScrolling) left = $(options.inside).scrollLeft() || 0;
left = (left > options.minX ? left : options .minX);
$.extend(props, {left: left 'px'});
}
if (options.transition > 0) $(this).animate(props, options.transition );
else $(this).css(props);
回傳$(這個);
});
}
});
})(jQuery);
[code]
(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // 預設值
inside:window, // 元素，居中進入視窗
transition: 0, // 毫秒，過渡時間
minX:0, // 像素，左側最小元素值
minY:0, / / 像素，最小頂部元素值
withScrolling:true, // booleen, 照顧滾動條(scrollTop)
vertical:true, // booleen, 中心垂直
horizo​​ntal:true // booleen , 中心水平
}, options);
return this.each(function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) top = $(options.inside).scrollTop() || 0;
top = (top > options.minY ? top : options.minY);
$.extend(props, {top: top 'px'});水平) {
var left = ( $(options.inside).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left = $(options.inside) .scrollLeft() || 0;
left = (left > options.minX ? left : options.minX);
$.extend(props, {left: left 'px'});
}
if (options.transition > 0 ) $(this).animate(props, options.transition);
else $(this).css(props);
回傳$(這個);
});
}
});
})(jQuery);


外掛程式版本
[javascript]




複製程式碼

複製程式碼

複製程式碼 程式碼如下：

(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // 預設值
inside:window, // 元素，居中進入視窗
transition: 0, // 毫秒，過渡時間
minX:0, // 像素，左側最小元素值
minY:0, // 像素,最小頂部元素值
withScrolling:true, // 布林值，照顧滾動條(scrollTop)
vertical:true, // 布林值，垂直居中
horizo​​ntal:true // 布林值，水平居中
}, options);
return this.each(function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($ (options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) top = $(options.inside).scrollTop()
top = (top > options.minY ? top : options.minY);
$.extend(props, {top: top 'px'});
var left = ($(options.inside). width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left = $(options.inside).scrollLeft( ) || 0;
left = (left > optionsLeft( ) || 0;
left = (left > options .minX ? left : options.minX);
$.extend(props, {left: left 'px'});
}
if (options.transition > 0) $(this).animate (props, options.transition);
else $(this).css(props);
回傳$(這個);
});
}
});
})(jQuery);

複製程式碼程式碼如下：

程式碼如下：



程式碼如下：



程式碼如下：



程式碼(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // 預設值
inside:window, //元素，居中到視窗
transition: 0, // 毫秒，過渡時間
minX:0, // 像素，最小左側元素值
minY:0, // 像素，最小頂部元素值
withScrolling:true, / / booleen, 處理滾動條(scrollTop)
vertical:true, // booleen, 垂直居中
horizo​​ntal:true // booleen, 水平居中
}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options}, options );每(function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($(options.inside).height() - $( this).outerHeight()) / 2;
if (options.withScrolling) top = $(options.inside).scrollTop() || 0;
top = (top > options.minY ? top : options.minY);
$.extend(props, {top: top
}
if (options.horizo​​ntal) {
var left = ($(options.inside) ).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left = $(options.inside).scrollLeft() || 0;

left = (left > options.minX ? left : options.minX);
$.extend(props, {left: left 'px'});
}

if (options.transition > 0) $(this) .animate(props, options.transition); else $(this).css(props); 回傳$(這個); }); } }); })(jQuery);

透過此程式碼啟動：




複製程式碼

複製程式碼複製程式碼 $(document).ready(function(){ $('#mainDiv').center(); $(window).bind('resize', function() { $ ('#mainDiv').center({transition:300});}); 觀此人JS程式碼，讓人嘆為觀止。 簡潔明了。卻又舉了一反三。