jquery divセンタリング手法アプリケーション紹介_jquery

非常に短いバージョン:
[html]

复制代代码如下:

$( '#myDiv').css({top:'50%',left:'50%',margin:'-' ($('#myDiv').height() / 2) 'px 0 0 -' ( $('#myDiv').width() / 2) 'px'});
$('#myDiv').css({上:'50%',左:'50%',マージン:'-' ($('#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()) / 2; (this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0) 'px', left: (left > 0 ? left : 0) 'px'}) ;
});
}
});


このコードによってアクティベートされます:

复制代

代码如下: $('#mainDiv').center();

[javascript]

复制代码

代码如下: (function($){ $.fn.extend({ center: function (options) {

var options = $.extend({ // デフォルト値

inside:window, //要素、ウィンドウの中心
transition: 0, // ミリ秒、遷移時間
minX:0, // ピクセル、左要素の最小値
minY:0, // ピクセル、上部要素の最小値
withScrolling:true, // boolean、スクロールバー (scrollTop) を処理します
vertical:true, // boolean、中央垂直
horizo​​ntal:true // boolean、中央水平
}, options);
return this.each(function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($(options.inside). height() - $(this).outerHeight()) / 2;
if (options.withScrolling) トップ = $(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);
$(this) を返す;
});
}
});
})(jQuery);
[code]
(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // デフォルト値
inside:window, // 要素、ウィンドウの中央に配置
transition: 0, // ミリ秒、遷移時間
minX:0, // ピクセル、左要素の最小値
minY:0, / / ピクセル、最上位要素の最小値
withScrolling:true, // boolean、スクロールバー (scrollTop) を処理します
vertical:true, // boolean、垂直中央
horizo​​ntal:true // boolean、中央水平
}, 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'});
if (options.水平) {
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);
$(this) を返す;
});
}
});
})(jQuery);


プラグイン バージョン
[javascript]

复制代码


代码如下:

(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // デフォルト値
inside:window, // 要素、ウィンドウの中心
transition: 0, // ミリ秒、遷移時間
minX:0, // ピクセル、左要素の最小値
minY:0, // ピクセル,最上部の要素の最小値
withScrolling:true, // boolean、スクロールバー (scrollTop) を処理します
vertical:true, // boolean、中央垂直
horizo​​ntal:true // boolean、中央水平
}, options);
return this.each(function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($ (options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) = $(options.inside).scrollTop() || 0;トップ = (トップ > options.minY ? トップ : options.minY);
$.extend(props, {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);
$(this) を返す;
});
}
});
})(jQuery);

复制代码代码如下:

(function($){

$.fn.extend({
center: function (options) {
var options = $.extend({ // デフォルト値
inside:window, // 要素、ウィンドウの中央に配置
transition: 0, // ミリ秒、遷移時間
minX:0, // ピクセル、左要素の最小値
minY:0, // ピクセル、上要素の最小値
withScrolling:true, / / boolean、スクロールバーを処理します (scrollTop)
vertical:true, // boolean、中央垂直
horizo​​ntal:true // boolean、中央水平
},
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'});
}
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);
$(this) を返す;
});
}
});
})(jQuery);


このコードによってアクティベートされます:

复制代代码如下:

$(document).ready(function(){

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


この人 JS コード、人は承認されています。
は確認済み。