jquery div 센터링 기술 적용 소개_jquery

매우 짧은 버전:
[html]

复代码 代码如下:

$( '#myDiv').css({top:'50%',left:'50%',margin:'-' ($('#myDiv').height() / 2) 'px 0 0 -' ( $('#myDiv').width() / 2) 'px'});
$('#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'}) ;
});
}
})(jQuery);


이 코드로 활성화됨:

复aze代码 代码如下:

$('#mainDiv').center();

[javascript]

复代码 代码如下:

(function($){

$.fn.extend({
center: function (options) {
var options = $.extend({ // 기본값
inside:window, // 요소, 창 중심
전환: 0, // 밀리초, 전환 시간
minX:0, // 픽셀, 최소 왼쪽 요소 값
minY:0, // 픽셀, 최소 상단 요소 값
withScrolling:true, // 부울, 스크롤바 관리(scrollTop)
vertical:true, // booleen, 중앙 수직
horizontal: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'})
if (options.horizontal) {
var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left = $(options.inside).scrollLeft() || 0;
왼쪽 = (왼쪽 > options.minX ? 왼쪽 : options.minX);
$.extend(props, {왼쪽: 왼쪽 '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, // 부울, 스크롤바 관리(scrollTop)
vertical:true, // 부울, 중앙 수직
horizontal:true // 부울, 중앙 horizon
}, 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.minY); 수평) {
var left = ($(options.inside).width() - $(this).outerWidth()) / 2
if (options.withScrolling) left = $(options.inside) .scrollLeft() || 0;
왼쪽 = (왼쪽 > options.minX ? 왼쪽 : options.minX);
$.extend(props, {왼쪽: 왼쪽 '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, // 부울, 스크롤 막대 관리(scrollTop)
vertical:true, // 부울, 중앙 수직
horizontal:true // 부울, 중앙 수평
}, 옵션);
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.horizontal) {
var left = ($(options.inside).width() - $(this).outerWidth()) / 2
if (options.withScrolling) left = $(options.inside).scrollLeft( ) || 0;
왼쪽 = (왼쪽 > options.minX ? 왼쪽 : options.minX);
$.extend(props, {왼쪽: 왼쪽 '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, // 요소, 창 중심
전환: 0, // 밀리초, 전환 시간
minX:0, // 픽셀, 최소 왼쪽 요소 값
minY:0, // 픽셀, 최소 상단 요소 값
withScrolling:true, / / booleen, 스크롤바 관리(scrollTop)
vertical:true, // booleen, center Vertical
horizontal:true // booleen, center 가로
}, options
이것을 반환합니다. 각각(함수() {
var props = {위치:'절대'};
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.horizontal) {
var left = ($(options.inside) ).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left = $(options.inside).scrollLeft() || 0;
왼쪽 = (왼쪽 > options.minX ? 왼쪽 : options.minX);
$.extend(props, {왼쪽: 왼쪽 'px'});
}
if (options.transition > 0) $(this).animate(props, options.transition);
else $(this).css(props);
$(this)를 반환합니다.
});
}
});
})(jQuery);


이 코드로 활성화됨:

复aze代码 代码如下:

$(document).ready(function(){

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


观此人JS代码,让人叹为观止。
简洁明了。却又举一反三。