jQuery插件仅调整背景图片 [英] jquery plugin resizing only background image

查看：181
本文介绍了jQuery插件仅调整背景图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我开始使用/学习HTML / CSS / jQuery的前两天发展我的网站和它差不多可以只用一个问题。

我用这个真棒jQuery插件通过c.bavota创建一个背景图像，将调整到浏览器窗口的全宽/高！

它的伟大工程，但问题是，我有其他图像在背景上（不能连接/在一个背景图片将它们结合起来），当我放大背景调整大小，但我的其他图像保持相同的大小，并在其位置是不正确的。

所以，我首先想到的是创建一个新的功能，还调整大小的其他图像相同的方式。

我想编辑的功能...

\r
\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/1.11.1/jquery.min.js\"></script>\r
 $（文件）。就绪（函数（）{\r
            / **\r
 * jQuery.fullBg\r
 * 1.0版\r
 *版权所有（C）2010 c.bavota - http://bavotasan.com\r
 *双MIT和GPL许可。\r
 *日期：2010年2月23日\r
** /\r
（函数（$）{\r
  $ .fn.fullBg =功能（）{\r
    VAR bgImg = $（本）;\r
    \r
    功能resizeImg（）{\r
      变种imgwidth = bgImg.width（）;\r
      变种imgheight = bgImg.height（）;\r
\r
      变种winwidth = $（窗口）.WIDTH（）;\r
      变种winheight = $（窗口）.height（）;\r
\r
      VAR widthratio = winwidth / imgwidth;\r
      VAR heightratio = winheight / imgheight;\r
\r
      VAR widthdiff = heightratio * imgwidth;\r
      VAR heightdiff = widthratio * imgheight;\r
\r
      如果（heightdiff＆GT; winheight）{\r
        bgImg.css（{\r
          宽度：winwidth +'像素'，\r
          高度：heightdiff +'像素'\r
        }）;\r
      }其他{\r
        bgImg.css（{\r
          宽度：widthdiff +'像素'，\r
          高度：winheight +'像素'\r
        }）;\r
      }\r
    }\r
    resizeImg（）;\r
    $（窗口）.resize（函数（）{\r
      resizeImg（）;\r
    }）;\r
  };\r
}）（jQuery的）\r
         }）;\r
\r
$（窗口）.load（函数（）{\r
$（＃背景）fullBg（）。\r
}）;

\r

\r
\r

我曾尝试使用此功能对我的非背景图片，但他们练得太大...
我的猜测是，如果我取代了$（窗口）.WIDTH（）;例如用$（背景）.WIDTH（）;并呼吁$函数（＃imagetoberesized）fullBg（）。和.height相同
它可能会奏效。但是我缺少jQuery的技能来传递这在图像

\r
\r

＆LT; IMG SRC =的ImagePath / Main2.jpgALT =ID =背景/＆GT;\r
＆LT; D​​IV CLASS =图像＆GT;\r
＆所述; A HREF =＃类=工具提示＆GT;\r
＆所述; IMG SRC =的ImagePath / imagei.jpgID =imagetoberesized/＆GT;\r
  ＆LT;跨度＆GT;\r
        ＆LT; H3＆gt;文字＆LT; / H3 GT＆;\r
   ＆LT; / SPAN＆GT;\r
＆所述; / A＆GT;\r
＆LT; / DIV＆GT;

\r

\r
\r

要的功能测试。
因此，任何想法如何/是否会工作？和/或如何我的形象传递给函数？
谢谢


解决方案

喜@CrypticKiwi希望这code是你想要结果
顺便说一句，请让我知道如果有任何问题。

 （函数（$）{
    $ .fn.fullBg =功能（）{
        VAR bgImg = $（本）;        bgImg.addClass（'fu​​llBg'）;        功能resizeImg（）{
            变种imgwidth = bgImg.width（）;
            变种imgheight = bgImg.height（）;            变种winwidth = $（窗口）.WIDTH（）;
            变种winheight = $（窗口）.height（）;            VAR widthratio = winwidth / imgwidth;
            VAR heightratio = winheight / imgheight;            VAR widthdiff = heightratio * imgwidth;
            VAR heightdiff = widthratio * imgheight;            如果（heightdiff＆GT; winheight）{
                bgImg.css（{
                    宽度：winwidth +'像素'，
                    高度：heightdiff +'像素'
                }）;
            }其他{
                bgImg.css（{
                    宽度：widthdiff +'像素'，
                    高度：winheight +'像素'
                }）;
            }
        }
        resizeImg（）;
        $（窗口）.resize（函数（）{
            resizeImg（）;
        }）;
    };    $ .fn.fullBg1 =功能（）{
        VAR bgImg = $（本）;
        警报（bgImg.width（））
        bgImg.addClass（'fu​​llBg'）;        功能resizeImg（）{
            变种imgwidth = bgImg.width（）;
            变种imgheight = bgImg.height（）;            变种winwidth = $（窗口）.WIDTH（）/ 10;
            变种winheight = $（窗口）.height（）/ 10;            VAR widthratio = winwidth / imgwidth;
            VAR heightratio = winheight / imgheight;            VAR widthdiff = heightratio * imgwidth;
            VAR heightdiff = widthratio * imgheight;            如果（heightdiff＆GT; winheight）{
                bgImg.css（{
                    宽度：winwidth +'像素'，
                    高度：heightdiff +'像素'
                }）;
            }其他{
                bgImg.css（{
                    宽度：widthdiff +'像素'，
                    高度：winheight +'像素'
                }）;
            }
        }
        resizeImg（）;
        $（窗口）.resize（函数（）{
            resizeImg（）;
        }）;
    };
}）（jQuery的）！＆LT; D​​OCTYPE HTML PUBLIC -  // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
＆LT; HTML的xmlns =htt​​p://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
＆LT;标题＆GT;全尺寸背景图片jQuery插件 - 演示| bavotasan.com＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / jquery.fullbg.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;风格类型=文/ CSS＆GT;
.fullBg {
    位置：固定;
    顶部：0;
    左：0;
    溢出：隐藏;
    的z-index：-90;
}
.fullBg1 {
    位置：固定;    溢出：隐藏;
    的z-index：10;
}#maincontent {
    位置：绝对的;
    顶：300像素;
    左：0;
    的z-index：50;
    宽度：100％;
    背景：#FFF;
    不透明度：0.9;
    过滤器：α（不透明= 90）;
    }#box {
    宽度：600px的;
    保证金：汽车;
    填充：0 10px的;
    }H1 {
    的margin-top：12px的;
    字体大小：40像素;
    文本对齐：中心;
    行高：44px;
    字体重量：正常;
    FONT-FAMILY：格鲁吉亚，衬线;
    颜色：＃222;
    }H2 {
    的margin-top：0;
    字体大小：24px的;
    行高：28px;
    字体重量：正常;
    FONT-FAMILY：格鲁吉亚，衬线;
    颜色：＃C52D08;
    }一个 {
    文字修饰：无;
    概述：无;
    颜色：＃C52D08;
    }    答：悬停{
        文字修饰：下划线;
        }
＆LT; /风格＆GT;
＆LT; /头＆GT;＆LT;身体GT;
＆LT; IMG SRC =图像/ bg.jpgALT =ID =背景/＆GT;
＆LT; D​​IV ID =日程地址搜索Maincontent＆GT;
    ＆LT; D​​IV ID =盒子＆GT;
        ＆LT; H1＆GT;全尺寸背景图片jQuery插件＆LT; / H1＆GT;
        ＆LT; H2＆GT;示范及LT; / H＆GT;
        只是调整这个窗口，你会看到在行动的插件。每当窗口大小的变化，背景图像的大小的变化。与它始终保持在适当的高宽比。
        ＆所述p为H.;＆下; A HREF =htt​​p://bavotasan.com/?p=1748＆GT;＆放大器; LAQUO;回到教程＆LT; / A＆GT;＆LT; / P＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
    ＆LT; IMG SRC =htt​​p://static.adzerk.net/Advertisers/af217662e49a4cbda030feae88418cdd.pngID =imagetoberesized的风格=宽度：100像素，高度：100像素; /＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（窗口）.load（函数（）{
    $（＃背景）fullBg（）。
    $（＃imagetoberesized）fullBg1（）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
＆LT;脚本＆GT;＆LT; / SCRIPT＆GT;

I started using/learning html/css/jquery two days ago to develop my website and its almost ready with only one problem.

I use this awesome jquery plugin by c.bavota to create a background image which will resize to the full width/height of the browser window!

It works great but the problem is that I have other images over the background (cant attach/combine them in one background image) and when I zoom the background resizes but my other images stay the same size and in their location which is not right.

So my first thought is to create a new function that also resizes the other images the same way.

The function I want to edit…

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

I have tried to use this function on my non background images but they turn out too large… My guess is if I replaced the $(window).width(); for example with $(Background).width(); and call the function on $("#imagetoberesized").fullBg(); and the same for .height It might work. But im lacking the jquery skills to pass the image which is in a 

<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>

to the function to test it. So any thoughts how/if it would work? and/or how to pass my image to the function? Thanks

解决方案

Hi @CrypticKiwi hopefully this code is you want
by the way please let me know if it has any questions 

(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插件仅调整背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆