首页 > Web开发 > 详细

jquery实现元素自适应水平垂直居中

时间:2015-04-12 18:59:18      阅读:219      评论:0      收藏:0      [点我收藏+]
(function($){
    $.fn.vhAlign =  function(){
        return this.each(function(i){
            //获取元素的内容高度
            var h = Math.ceil($(this).height());
            //outerHeight=padding+border+height
            var oh = Math.ceil($(this).outerHeight());
            //取得margin-top值
            var mt = Math.ceil(oh / 2);
            //取得元素宽度
            var w = Math.ceil($(this).width());
            //outerWidth=padding+border+width
            var ow = Math.ceil($(this).outerWidth());
            //取得margin-left
            var ml = Math.ceil(ow / 2);
            //实现元素居中效果
            $(this).css({
                "margin-top": "-" + mt + "px",
                "top": "50%",
                "margin-left": "-" + ml + "px",
                "left": "50%",
                "width":w,
                "height":h,
                "position": "absolute"
            }); 
        });
    };
})(jQuery);

jquery实现元素自适应水平垂直居中

原文:http://www.cnblogs.com/gyx19930120/p/4419984.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!