设定div始终居中显示

最新推荐文章于 2023-10-26 15:59:50 发布

colorsunlight_110

最新推荐文章于 2023-10-26 15:59:50 发布

阅读量761

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/colorsunlight/article/details/44338409

版权

jQuery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
(function($){
    $.fn.extend({
        center:function(options){        //center插件
            var options=$.extend({       //默认属性值
                inside:window,           //元素居于窗体中心
                transition:0,            //元素居中移动时的时间，单位是millisecond
                minX:0,                  //元素最小X方向距边值
                minY:0,                  //元素最小Y方向距边值
                withScrolling:true,      //是否支持滚动条
                vertical:true,           //是否支持垂直居中
                horizontal:true          //是否支持水平居中
            },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).outerHeight())/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);
</script>
<script type="text/javascript">
$(document).ready(function(){
    $("#centerDiv").center();
    $(window).bind('resize',function(){
        $("#centerDiv").center({transition:500});
    });
});
</script>
</head>
<body>
    <div id="centerDiv" style="height: 100px;width: 200px;background: #ccf">设定div始终居中显示</div>
</body>