jquery div 居中技巧应用介绍


Posted in Javascript onNovember 24, 2012

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}); 
}); 
);

观此人JS代码,让人叹为观止。
简洁明了。却又举一反三。
Javascript 相关文章推荐
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
Javascript 命名空间模式
Nov 01 Javascript
javascript打开word文档的方法
Apr 16 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 #Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 #Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 #Javascript
js 如何实现对数据库的增删改查
Nov 23 #Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 #Javascript
IE下使用cloneNode注意事项分享
Nov 22 #Javascript
jquery remove方法应用详解
Nov 22 #Javascript
You might like
php中的观察者模式
2010/03/24 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
Python显示进度条的方法
2014/09/20 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
python如何为创建大量实例节省内存
2018/03/20 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
详解Python学习之安装pandas
2019/04/16 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
简单说说tomcat的配置
2013/05/28 面试题
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
2014年教研工作总结
2014/12/06 职场文书
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫