0

在调整窗口浏览器的大小时，我设法使边距变小并且正文的宽度保持不变。问题是“#content”仍然闪烁一秒钟。

如果您测试下面的代码，您会明白我的意思。很难表达它的行为。有人知道如何解决吗？它与回调函数和事件顺序有什么关系。谢谢你。

这是代码：

<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 发送“调整大小”事件这么多次（取决于您使用的浏览器），并且您的浏览器只能如此快速地执行代码（取决于浏览器和您的计算机的功能）是）。您所做的几乎是每秒执行数十次调整大小功能，并且代码运行速度不够快，无法跟上您调整窗口大小的速度。此外，当您最终停止移动窗口并触发最终调整大小事件时，运行代码需要时间 - 它不仅会立即完成，所有代码都需要一些时间才能运行。

如果您不想注意到闪烁，请使用媒体查询。

于 2013-01-11T22:27:49.507 回答