jquery div 居中技巧应用介绍
very short version:
[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'});
short version:
[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'});
});
}
});
})(jquery);
(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'});
});
}
});
})(jquery);
activated by this code :
. 代码如下:
$('#maindiv').center();
[javascript]
. 代码如下:
(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // default values
inside:window, // element, center into window
transition: 0, // millisecond, transition time
minx:0, // pixel, minimum left element value
miny:0, // pixel, minimum top element value
withscrolling:true, // booleen, take care of the scrollbar (scrolltop)
vertical:true, // booleen, center vertical
horizontal:true // booleen, center horizontal
}, 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'});
}
if (options.horizontal) {
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);
return $(this);
});
}
});
})(jquery);
[code]
(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // default values
inside:window, // element, center into window
transition: 0, // millisecond, transition time
minx:0, // pixel, minimum left element value
miny:0, // pixel, minimum top element value
withscrolling:true, // booleen, take care of the scrollbar (scrolltop)
vertical:true, // booleen, center vertical
horizontal:true // booleen, center horizontal
}, 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'});
}
if (options.horizontal) {
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);
return $(this);
});
}
});
})(jquery);
plugin version
[javascript]
. 代码如下:
(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // default values
inside:window, // element, center into window
transition: 0, // millisecond, transition time
minx:0, // pixel, minimum left element value
miny:0, // pixel, minimum top element value
withscrolling:true, // booleen, take care of the scrollbar (scrolltop)
vertical:true, // booleen, center vertical
horizontal:true // booleen, center horizontal
}, 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'});
}
if (options.horizontal) {
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);
return $(this);
});
}
});
})(jquery);
. 代码如下:
(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // default values
inside:window, // element, center into window
transition: 0, // millisecond, transition time
minx:0, // pixel, minimum left element value
miny:0, // pixel, minimum top element value
withscrolling:true, // booleen, take care of the scrollbar (scrolltop)
vertical:true, // booleen, center vertical
horizontal:true // booleen, center horizontal
}, 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'});
}
if (options.horizontal) {
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);
return $(this);
});
}
});
})(jquery);
activated by this code :
. 代码如下:
$(document).ready(function(){
$('#maindiv').center();
$(window).bind('resize', function() {
$('#maindiv').center({transition:300});
});
);
推荐阅读
-
android imageview图片居中技巧应用
-
教你用CorelDRAW绘制矩形和方形 矩形工具的使用方法和应用技巧介绍
-
如何使用CorelDRAW为对象填充图案 图案填充的操作方法和应用技巧介绍
-
如何在CorelDRAW中使用渐变填充对象 渐变填充的操作方法和应用技巧介绍
-
android imageview图片居中技巧应用
-
jquery 动态创建元素的方式介绍及应用
-
教你用CorelDRAW绘制矩形和方形 矩形工具的使用方法和应用技巧介绍
-
如何在CorelDRAW中使用渐变填充对象 渐变填充的操作方法和应用技巧介绍
-
如何使用CorelDRAW为对象填充图案 图案填充的操作方法和应用技巧介绍
-
CorelDRAW实例:在CorelDRAW中对图形填充纯色方法及应用技巧介绍