Question

在调整窗口浏览器大小时，我设法使边距变小，并且主体的宽度保持不变。问题是'#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>

Answer 1

它闪烁的原因是因为浏览器每秒都会向JavaScript发送“resize”事件很多次（根据您使用的浏览器而变化），并且您的浏览器只能如此快速地执行代码（根据浏览器的不同而变化）功能强大的你的电脑）。你正在做的就是每秒执行几次调整大小功能，代码运行速度不够快，无法跟上你调整窗口大小的速度。此外，当你最终停止移动窗口并触发最终的resize事件时，需要花费一些时间来运行代码 - 它不仅仅是瞬间完成，所有代码都需要一些时间来运行。

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

Jquery没有正确调整窗口大小

1 个答案: