jQuery - 设定 div 始终居中显示 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery如何设定div始终居中显示</title>
        <link rel="stylesheet" type="text/css" href="../css/demos.css"/>
        <style type="text/css">
            #centerDiv {
                width:150px;
                height:150px;
                font-size:12px;
                color:blue;
                background-color:#808080;
            }
        </style>
    </head>
    <body>
        <h2 id="h2-caption">jQuery如何设定div始终居中显示</h2>
        <div id="centerDiv">设定div始终居中显示</div>
        <script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        // 居中插件 
        ;(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);
            
        // 屏幕居中
        $(function(){
            $('#centerDiv').center();
            $(window).bind('resize',function(){
                $('#centerDiv').center({transition:500});
            });
        });
        </script>
    </body>
</html>

 

posted @ 2016-06-21 17:58  温柔的敲敲敲  阅读(1597)  评论(0)    收藏  举报