利用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 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
AngularJS中的promise用法分析
May 19 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 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
优化使用mysql存储session的php代码
2008/01/10 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
python实现删除文件与目录的方法
2014/11/10 Python
解析Python编程中的包结构
2015/10/25 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
最新结婚典礼主持词
2014/03/14 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
安全员岗位职责
2015/02/10 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript