溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-06-17 09:46:25 來源：網(wǎng)絡(luò) 閱讀：1479 作者：elick 欄目：web開發(fā)

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

項目主頁：http://www.open-open.com/lib/view/home/1344826882069
 
用法很簡單只需要幾行簡單代碼就可以實現(xiàn)背景多種變化
 
 
  1. <script> 
  2.   $(function () { 
  3.                       
  4. //用法一 
  5.      $.backstretch("img/bg.jpg"); 
  6.                            
  7. //用法二     
  8.       $("#content").backstretch([ 
  9.       "img/bootstrap-mdo-sfmoma-01.jpg" 
  10.     , "img/bootstrap-mdo-sfmoma-02.jpg" 
  11.     , "img/bootstrap-mdo-sfmoma-03.jpg" 
  12.   ], {duration: 3000, fade: 750});  
  13.                       
  14.                       
  15. //用法三 
  16.   $("#outside").click(function(e) { 
  17.     e.preventDefault(); 
  18.     $("#click-demo").backstretch('img/5560563_103531007912_2.jpg'); 
  19.   }); 
  20.                        
  21.   $("#cheers").click(function(e) { 
  22.     e.preventDefault(); 
  23.     $("#click-demo").backstretch('img/20071029131759934_2.jpg'); 
  24.   }); 
  25.                       
  26.   }) 
  27. </script> 
 
 
 

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

 
 
這是我做的一個小例子,不過截圖很有趣,這是我通過瀏覽器截取的圖片, 最底層那張背景圖藍天白云那個圖片,所顯示的區(qū)域是我瀏覽器能看到的區(qū)域,看不到的區(qū)域他就不繪制了.
 
有興趣的可以看下例子
 
下載地址
向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手