利用jq让你的div居中的好方法分享


Posted in Javascript onNovember 21, 2013

very short version:

$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});

short version:

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

PLUGIN VERSION

(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});
    });
);
Javascript 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
jquery操作select大全
Apr 25 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 #Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 #Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 #Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 #Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 #Javascript
jtable列中自定义button示例代码
Nov 21 #Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 #Javascript
You might like
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
php简单复制文件的方法
2016/05/09 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JavaScript中的字符串操作详解
2013/11/12 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
Python生成随机验证码的两种方法
2015/12/22 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
python操作 hbase 数据的方法
2016/12/18 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
利用python如何处理nc数据详解
2018/05/23 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
python super用法及原理详解
2020/01/20 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
文明餐桌活动方案
2014/02/11 职场文书
就业协议书范本
2014/04/11 职场文书
购房委托书
2014/10/15 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL