利用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 相关文章推荐
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
UserData用法总结 lanyu出品
Jul 01 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
Javascript高级技巧分享
Feb 25 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
javascript实现密码验证
Nov 10 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
vue-element-admin项目导入和导出的实现
May 21 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 print EOF实现方法
2009/05/21 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
优秀乡村医生先进事迹材料
2014/08/23 职场文书
科学发展观演讲稿
2014/09/11 职场文书
现役军人家属慰问信
2015/03/24 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers