jQuery插件僅調整背景圖像的大小

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 個解決方案

解決方案1
0 2016-01-08 07:57:48

jQuery插件僅調整背景圖像的大小

問題描述

1 個解決方案

解決方案1 0 2016-01-08 07:57:48

解決方案1
0 2016-01-08 07:57:48