设为首页 - 加入收藏 徐州站长网 (http://www.2g-flowers.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 收入 2015 手机 开发
当前位置: 金亚洲注册 > 站长资讯 > 传媒 > 正文

jQuery插件:全背景图插件(Full Size Background Image)

发布时间:2018-08-27 08:20 所属栏目:[传媒] 来源:站长网
导读:功能:背景图片始终与窗口大小一致。 主要代码下: (function($) { $.fn.fullBg = function(){ var bgImg = $(this); function resizeImg() { var imgwidth = bgImg.width(); var imgheight = bgImg.height(); var winwidth = $(window).width(); var winh

金亚洲注册 www.2g-flowers.com 功能:背景图片始终与窗口大小一致。

fullbg Full Size Background Image jQuery Plugin

主要代码下:

(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.veryhuo.com/a/Demo/2010/jQuery-fullback.html

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

作者:Rady Huang
出处:http://www.radys.cn/article.asp?id=263

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章