JQUERY背景圖全屏按比例縮放插件 JQUERY-BACKSTRETCH

 jquery-backstretch 是一個用來實現全屏按比例縮放背景圖片的jQuery插件，兼容大部分瀏覽器，但IE6和IE7的支持不理想。

項目主頁：http://www.open-open.com/lib/view/home/1344826882069

 

用法很簡單只需要幾行簡單代碼就可以實現背景多種變化

 

 

<script>
  $(function () {

//用法一
     $.backstretch("img/bg.jpg");

//用法二
      $("#content").backstretch([
      "img/bootstrap-mdo-sfmoma-01.jpg"
    , "img/bootstrap-mdo-sfmoma-02.jpg"
    , "img/bootstrap-mdo-sfmoma-03.jpg"
  ], {duration: 3000, fade: 750});


//用法三
  $("#outside").click(function(e) {
    e.preventDefault();
    $("#click-demo").backstretch('img/5560563_103531007912_2.jpg');
  });

  $("#cheers").click(function(e) {
    e.preventDefault();
    $("#click-demo").backstretch('img/20071029131759934_2.jpg');
  });

  })
</script>

 

 

 

 

 

這是我做的一個小例子,不過截圖很有趣,這是我通過瀏覽器截取的圖片, 最底層那張背景圖藍天白雲那個圖片,所顯示的區域是我瀏覽器能看到的區域,看不到的區域他就不繪製了.

 

有興趣的可以看下例子

 

下載地址