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 相关文章推荐
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
php 静态化实现代码
2009/03/20 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
PHP的几个常用加密函数
2016/02/03 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
如何基于python操作json文件获取内容
2019/12/24 Python
Python pandas如何向excel添加数据
2020/05/22 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
气象学专业个人求职信
2014/03/15 职场文书
毕业大学生自荐信
2014/06/17 职场文书
五一活动标语
2014/06/30 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers