jQuery插件：全背景圖插件(Full Size Background Image)

功能：背景圖片始終與窗口大小一致。

主要代碼下：

(function($) {
  $.fn.fullBg = function(){
    var bgImg = $(this);   function resizeImg() {
      var imgwidth = bgImg.width();
      var imgheight = bgImg.height();   var winwidth = $(window).width();
      var winheight = $(window).height();   var widthratio = winwidth / imgwidth;
      var heightratio = winheight / imgheight;   var widthdiff = heightratio * imgwidth;
      var heightdiff = widthratio * imgheight;   if(heightdiff>winheight) {
        bgImg.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImg.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });
      }
    }
    resizeImg();
    $(window).resize(function() {
      resizeImg();//當窗口大小變化時改變圖片的大小
    });
  };
})(jQuery)

主要結構：

<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
<!-- Your site content goes here -->
</div>

相關樣式：

.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
}   #maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}

DEMO：http://www.vxbq.cn/a/Demo/2010/jQuery-fullback.html

英文演示：http://bavotasan.com/demos/fullbg/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈