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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
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
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP 图片水印类代码
2012/08/27 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
vue滚动tab跟随切换效果
2020/06/29 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
python机器学习之决策树分类详解
2017/12/20 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
触摸春天教学反思
2014/02/03 职场文书
前处理班长职位说明书
2014/03/01 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
婚育证明格式
2015/06/17 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis