利用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 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
swiper自定义分页器的样式
Sep 14 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
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
vue二级路由设置方法
2018/02/09 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
详解django中Template语言
2020/02/22 Python
Python如何获取文件路径/目录
2020/09/22 Python
浅析python实现动态规划背包问题
2020/12/31 Python
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
小学庆六一活动方案
2014/02/28 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
电影雨中的树观后感
2015/06/15 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
git stash(储藏)的用法总结
2022/06/25 Servers