jquery實現的背景圖鋪滿全屏效果

admin發表於2017-03-20
jQuery

本章節介紹一下如何實現一個背景圖片鋪滿全屏效果，並且當調整網頁視窗大小的時候，也會實現圖片鋪滿全屏效果，但是此程式碼有個美中不足的地方就是背景圖片會出現變形現象，大家可以稍作參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
html,body{
  margin:0px;
  padding:0px;
  height:100%;
}
body{overflow:hidden}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>  
<script type="text/javascript"> 
$(function(){ 
  $("body").append("<div id='main_bg' style='position:absolute;z-index:-10;left:0;top:0'/>");
  $("#main_bg").append("<img src='mytest/demo/antzone.jpg' id='bigpic'>"); 
  cover(); 
  $(window).resize(function(){
    cover(); 
  }); 
}); 
function cover(){ 
  var win_width = $(window).width(); 
  var win_height = $(window).height(); 
  $("#bigpic").attr({width:win_width,height:win_height}); 
} 
</script>
</head>
<body>
 
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程，此程式碼確實有個缺點就是圖片變形了，如果希望實現圖片不會變形，那麼可以參閱背景圖片等比例平鋪拉伸全屏效果特效，下面介紹一下上面特效的實現過程。

一.程式碼註釋:

1.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

2.$("body").append("<div id='main_bg' style='position:absolute;z-index:-10;left:0;top:0'/>")，為body新增一個div元素，這個div裡面會包裹背景圖片，注意對此div的設定，雖然不是直接設定body的背景圖片，但是使用絕對定位的方式模擬實現了背景圖片效果。

3.$("#main_bg").append("<img src='antzone.jpg' id='bigpic'>")，為div新增圖片。

4.cover()，此函式可以設定圖片的尺寸。

5.$(window).resize(function(){cover()})，調整視窗大小的時候也能夠實現圖片鋪滿全屏效果。

6.ar win_width = $(window).width()，獲取瀏覽器客戶區的寬度。

7.var win_height = $(window).height()，獲取瀏覽器客戶區的高度。

8.$("#bigpic").attr({width:win_width,height:win_height})，設定圖片的尺寸。

二.相關閱讀:

1.append()函式可以參閱jQuery append()一章節。

2.resize事件可以參閱jQuery resize 事件一章節。

3.attr()函式可以參閱attr()函式區別簡單介紹一章節。 

相關文章