Question

两天前我开始使用/学习html / css / jquery开发我的网站，几乎只有一个问题。

我使用c.bavota这个非常棒的jquery插件来创建一个背景图像，它将调整大小到浏览器窗口的整个宽度/高度！

它工作得很好，但问题是我在背景上有其他图像（无法将它们附加/组合在一个背景图像中），当我缩放背景调整大小但我的其他图像保持相同的大小和位置，这是不对。

所以我的第一个想法是创建一个新功能，同样也可以调整其他图像的大小。

我要编辑的功能......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 $(document).ready(function() {
            /**
 * jQuery.fullBg
 * Version 1.0
 * Copyright (c) 2010 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 02/23/2010
**/
(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)
         });

$(window).load(function() {
	$("#background").fullBg();
});

我试图在我的非背景图片上使用此功能，但结果太大了...... 我的猜测是，如果我替换了$（window）.width（）;例如，$（Background）.width（）;并在$（“＃imagetoberesized”）上调用该函数.fullBg（）; .height也一样它可能会奏效。但我缺乏传递图像的jquery技能

<img src="imagepath/Main2.jpg" alt="" id="background"/>
<div class="Image">
<a href="#" class="tooltip">
<img src="imagepath/imagei.jpg" id="imagetoberesized"/>
  <span>
        <h3>Text</h3>
   </span>
</a>
</div>

到测试它的功能。那么任何想法如何/如果它会起作用？和/或如何将我的图像传递给函数？感谢

Answer 1

嗨@CrypticKiwi希望这段代码是你想要的顺便问一下，如果有任何问题请告诉我

(function($) {
    $.fn.fullBg = function(){
        var bgImg = $(this);

        bgImg.addClass('fullBg');

        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();
        }); 
    };

    $.fn.fullBg1 = function () {
        var bgImg = $(this);
        alert(bgImg.width())
        bgImg.addClass('fullBg');

        function resizeImg() {
            var imgwidth = bgImg.width();
            var imgheight = bgImg.height();

            var winwidth = $(window).width()/10;
            var winheight = $(window).height()/10;

            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)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Full Size Background Image jQuery Plugin - Demo | bavotasan.com</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fullbg.js"></script>
<style type="text/css">
.fullBg {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index:-90;
}
.fullBg1 {
    position: fixed;

    overflow: hidden;
    z-index:10;
}

#maincontent {
    position: absolute;
    top: 300px;
    left: 0;
    z-index: 50;
    width: 100%;
    background: #fff;
    opacity: 0.9; 
    filter: alpha(opacity=90);
    }

#box {
    width: 600px;
    margin: auto;
    padding: 0 10px;
    }

h1 { 
    margin-top: 12px;
    font-size: 40px;
    text-align: center;
    line-height: 44px;
    font-weight: normal;
    font-family: Georgia,serif;
    color: #222;
    }

h2 { 
    margin-top: 0;
    font-size: 24px;
    line-height: 28px;
    font-weight: normal;
    font-family: Georgia,serif;
    color: #C52D08;
    }

a {
    text-decoration: none;
    outline: none;
    color: #C52D08;
    }

    a:hover {
        text-decoration: underline;
        }
</style>
</head>

<body>
<img src="images/bg.jpg" alt="" id="background" />
<div id="maincontent">
    <div id="box">
        <h1>Full Size Background Image jQuery Plugin</h1>
        <h2>Demo</h2>
        Just resize this window and you will see the plugin in action. Whenever the window size changes, the background image size changes. AND it always stays in the proper aspect ratio.
        <p><a href="http://bavotasan.com/?p=1748">&laquo; back to tutorial</a></p>
    </div>
</div>
    <img src="http://static.adzerk.net/Advertisers/af217662e49a4cbda030feae88418cdd.png" id="imagetoberesized" style="width:100px;height:100px;" />
<script type="text/javascript">
$(window).load(function() {
    $("#background").fullBg();
    $("#imagetoberesized").fullBg1();
});
</script>
</body>
</html>
<script>

</script>

jquery插件仅调整背景图像的大小

1 个答案: