最近在做前臺效果的時候用到了JQuery提供的resize()事件。resize 這個事件是監聽瀏覽器視窗的放大與縮小，也就是說瀏覽器視窗大小的變化。

       我在W3CSCHOOL上面查閱的時候，提供了一個例子。W3C原始碼

  1. <html> 
  2. <head> 
  3. <script type="text/javascript" src="/jquery/jquery.js"></script> 
  4. <script type="text/javascript"> 
  5. x=0; 
  6. $(document).ready(function(){ 
  7.   $(window).resize(function() { 
  8.     $("span").text(x+=1); 
  9.   }); 
  10.   $("button").click(function(){ 
  11.     $(window).resize(); 
  12.   }); 
  13. }); 
  14. </script> 
  15. </head> 
  16. <body> 
  17. <p>視窗的大小被調整了 <span>0</span> 次。</p> 
  18. <p>請試著調整瀏覽器視窗的大小。</p> 
  19. <button>觸發視窗的 resize 事件</button> 
  20. </body> 
  21. </html> 
結果我在IE環境下放大視窗 resize 事件執行了兩次。後來我在谷歌和百度上面查詢了下， 都存在IE環境下執行兩次的相關資訊。最後發現一個很不錯的解決方案。 國外有個哥子寫了個外掛專門針對Jquery.resize()事件增強了。 地址在這裡：http://benalman.com/projects/jquery-resize-plugin/ 在新增jquery.js之後在新增 "jquery.ba-resize.js" 就可以了。  
  1. <html> 
  2. <title>JQuery - resize()</title> 
  3. <head> 
  4. <script type="text/javascript" src="js/jquery.js"></script> 
  5. <script type="text/javascript" src="js/jquery.ba-resize.js"></script>  
  6. <script type="text/javascript"> 
  7. x=0; 
  8. $(document).ready(function(){ 
  9.   $(window).resize(function() { 
  10.    $("span").text(x+=1); 
  11. }); 
  12.  
  13. }); 
  14. </script> 
  15. </head> 
  16. <body> 
  17. <p>視窗大小被調整過 <span>0</span> 次。</p> 
  18. <p>請試著重新調整瀏覽器視窗的大小。</p> 
  19. </body> 
  20. </html>