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 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
Javascript实现基本运算器
Jul 15 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
react写一个select组件的实现代码
Apr 03 Javascript
原生js无缝轮播插件使用详解
Mar 09 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树的代码,可以嵌套任意层
2006/10/09 PHP
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
Yii实现简单分页的方法
2016/04/29 PHP
php简单截取字符串代码示例
2016/10/19 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
php适配器模式简单应用示例
2019/10/23 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
javascript中layim之查找好友查找群组
2021/02/06 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
python3中property使用方法详解
2019/04/23 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
班子四风对照检查材料
2014/08/21 职场文书
大一新生检讨书
2014/10/29 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang