jquery-backstretch 是一个用来实现全屏按比例缩放背景图片的jQuery插件，兼容大部分浏览器，但IE6和IE7的支持不理想。

 
用法很简单只需要几行简单代码就可以实现背景多种变化
 
  
 
    
     
     
  1. <script> 
    2.  
     
  2.   $(function () { 
    3.  
     
  3.                       
    4.  
     
  4. //用法一 
    5.  
     
  5.      $.backstretch("img/bg.jpg"); 
    6.  
     
  6.                            
    7.  
     
  7. //用法二     
    8.  
     
  8.       $("#content").backstretch([ 
    9.  
     
  9.       "img/bootstrap-mdo-sfmoma-01.jpg" 
    10.  
     
  10.     , "img/bootstrap-mdo-sfmoma-02.jpg" 
    11.  
     
  11.     , "img/bootstrap-mdo-sfmoma-03.jpg" 
    12.  
     
  12.   ], {duration: 3000, fade: 750});  
    13.  
     
  13.                       
    14.  
     
  14.                       
    15.  
     
  15. //用法三 
    16.  
     
  16.   $("#outside").click(function(e) { 
    17.  
     
  17.     e.preventDefault(); 
    18.  
     
  18.     $("#click-demo").backstretch('img/5560563_103531007912_2.jpg'); 
    19.  
     
  19.   }); 
    20.  
     
  20.                        
    21.  
     
  21.   $("#cheers").click(function(e) { 
    22.  
     
  22.     e.preventDefault(); 
    23.  
     
  23.     $("#click-demo").backstretch('img/20071029131759934_2.jpg'); 
    24.  
     
  24.   }); 
    25.  
     
  25.                       
    26.  
     
  26.   }) 
    27.  
     
  27. </script> 
    28.  
    
 
   
 
   

       
   
 
   

       
   
 
   

       
   
 
   
 
   

       
   
 
   

       
   
 
   

     这是我做的一个小例子,不过截图很有趣,这是我通过浏览器截取的图片, 最底层那张背景图蓝天白云那个图片,所显示的区域是我浏览器能看到的区域,看不到的区域他就不绘制了. 
   
 
   

       
   
 
   

     有兴趣的可以看下例子