0

ウィンドウのブラウザのサイズを変更するときに、マージンを小さくし、本体の幅を同じに保つことができました。問題は、「＃content」がまだ1秒間点滅することです。

以下のコードをテストすると、私が何を意味するかがわかります。その振る舞いを表現するのは難しいです。誰かがそれを修正する方法を知っていますか？コールバック関数とイベントの順序とは関係がありますか？ありがとうございました。

コードは次のとおりです。

<html>
    <head>          
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>     
        <style>
            html, body{
                padding: 0;         
                margin: 0, auto;                
            }           
            body{
                position:absolute;
                margin: 0px;
                padding: 0px;
            }
            #content{
                background-color: green;
            }
            #mainContent{
                background-color: orange; 
            }
            aside{
                background-color: blue;
            }
            .floatLeft{
                float:left;
            }
            .clear{
                clear:both;
            }
        </style>
    </head>
    <body>      
        <section id="content" class="border">
            <section id="mainContent" class="floatLeft" >   
                mainContent
            </section>                      
            <!-- End of main content -->

            <aside class="floatLeft">                               
                aside                   
            </aside>
            <!-- End of aside -->

            <p class="clear"></p>

        </section>
        <!-- End of content -->

        <script type="text/javascript">
            $(document).ready(function(){               
                change_template();
            });

            change_template = function(){       
                var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w, left_right2, last_width;       
                left_right = 180;

                aux = left_right;

                top = screen.height - (screen.height - 100);            
                left_right = left_right - (screen.width -  $(window).width())/2;


                resize_body(top, left_right, left_right);

                    last_width = $(window).width();

                    $( window ).resize(
                    function(){

                        if($(window).width() > last_width){

                            left_right = left_right + ($(window).width() - last_width)/2;                           

                        }else if($(window).width() < last_width){

                            left_right = left_right - (last_width -  $(window).width())/2;

                        }

                        resize_body(top, left_right, left_right);

                            last_width = $(window).width();                         

                    });                                                 

                content_w = screen.width - 2*aux;                   

                mcontent_w = content_w - 300;
                $('#mainContent').css('width', mcontent_w);

                aside_w = content_w - mcontent_w;
                $('aside').css('width', aside_w);                               

            }

            resize_body = function(top, left, right){

                $('body').css('top', top+'px');
                $('body').css('left', left+'px');
                $('body').css('right', right+'px');             
            }
        </script>               
    </body>
</html>
4

1 に答える 1

1

点滅する理由は、ブラウザがJavaScriptに「サイズ変更」イベントを1秒間に何度も送信するだけであり（使用するブラウザによって異なります）、ブラウザがコードを実行できるのは非常に高速であるためです（ブラウザとコンピュータの性能によって異なります）。は）。ほとんどの場合、サイズ変更関数を1秒間に数十回実行しており、ウィンドウのサイズ変更の速度に追いつくのに十分な速度でコードを実行できません。また、最終的にウィンドウの移動を停止し、最後のサイズ変更イベントがトリガーされると、コードの実行に時間がかかります。コードが瞬時に完了するだけでなく、すべてのコードの実行に時間がかかります。

点滅に気づきたくない場合は、メディアクエリを使用してください。

于 2013-01-11T22:27:49.507 に答える