Jquery沒有正確調整窗口大小

我設法讓邊距變小，並且在調整窗口瀏覽器大小時，主體寬度保持不變。問題是'#content'仍然閃爍一秒鐘。Jquery沒有正確調整窗口大小

如果你測試下面的代碼，你會明白我的意思。很難表達它的行爲。有人知道如何解決這個問題嗎？它與回調函數和事件的順序有什麼關係？謝謝。

下面是代碼：

<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>

來源

2013-01-11 Carmen Cojocaru

它閃爍是因爲瀏覽器僅每秒發送「調整」事件的JavaScript這麼多次的原因（這取決於您使用的瀏覽器變量），你的瀏覽器就可以只執行代碼如此之快（取決於瀏覽器和您的計算機功能有多強大）。你正在做的就是每秒執行數十次的調整大小函數，並且代碼無法快速運行以跟上調整窗口大小的速度。此外，當您最終停止移動窗口並觸發最終調整大小事件時，代碼運行需要時間 - 它不會立即完成，所有代碼都需要一些時間才能運行。

如果您不想注意閃爍，請使用媒體查詢。

來源

2013-01-11 22:27:49 Jack

Jquery沒有正確調整窗口大小

回答

相關問題