利用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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
js实现抽奖功能
Nov 24 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
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实现var_export的详细介绍
2013/06/20 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
深入浅析python with语句简介
2018/04/11 Python
Django web框架使用url path name详解
2019/04/29 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
django实现类似触发器的功能
2019/11/15 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
会议邀请函范文
2014/01/09 职场文书
机关财务管理制度
2014/01/17 职场文书
保护母亲河倡议书
2014/04/14 职场文书
开工典礼策划方案
2014/05/23 职场文书
小学运动会演讲稿
2014/08/25 职场文书
个人贷款收入证明
2014/10/26 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL