1

我在下面的代码工作正常，但我相信它可以更加精简。

无论屏幕大小如何，该脚本基本上都会调整图像的大小并将其水平放置在其包含 div 的中心。

函数“resizeBg”中的两个函数是相同的，只是它们指向不同的 div（“.block1”和“.block2”），其中包含具有不同类（“.bg1”和“.bg2”）的图像。

我需要将函数 resizeBG 单独应用于每个 div。一张图像可能是纵向的，而另一张可能是横向的，因此结果会因图像比例而异。这是我现在可以让它工作的唯一方法，但我意识到它可能会更简单/更整洁。

HTML

<div class="block block1">
    IMAGE
</div>
<div class="block block2">
    IMAGE
</div>

CSS

.block1 {background: #000000;}
.block2 {background: ffffff;}

.block {
    float: left;
    width: 50%;
    height: 100%;
    overflow: hidden;
    }

.bgwidth { 
  width: 100%;
  }

.bgheight { 
  height: 100%;
  }

jQuery

jQuery(window).load(function() {
// FULLSCREEN BACKGROUND IMAGE
var theWindow = $(window);
var block1 = $('.block1');
bg1 = block1.children(".bg1");
var block2 = $('.block2');
bg2 = block2.children(".bg2");
aspectRatio1 = bg1.width() / bg1.height();
aspectRatio2 = bg2.width() / bg2.height();

function resizeBg() {

    $('.block1').each(function() {
        if ((block1.width() / block1.height()) < aspectRatio1) {
            bg1.removeClass('bgwidth').addClass('bgheight');
            if(bg1.width() > block1.width()) {
                bg1.each(function(){
                    //get width (unitless) and divide by 2
                    var hWide = ($(this).width() - block1.width())/2;
                    // attach negative and pixel for CSS rule
                    hWide = '-' + hWide + 'px';
                    $(this).addClass("js-fix").css({
                        "margin-left" : hWide
                        });
                    });
                }
            else {
                bg1.each(function(){
                    $(this).removeClass("js-fix").css({
                        "margin-left" : 0 + 'px'
                        });
                    });
                };
        } else {
            bg1.removeClass('bgheight').addClass('bgwidth');

            bg1.each(function(){
                $(this).removeClass("js-fix").css({
                    "margin-left" : 0 + 'px'
                });
            });
        }

    });




    $('.block2').each(function() {
        if ((block2.width() / block2.height()) < aspectRatio2) {
            bg2.removeClass('bgwidth').addClass('bgheight');
            if(bg2.width() > block2.width()) {
                bg2.each(function(){
                    //get width (unitless) and divide by 2
                    var hWide = ($(this).width() - block2.width())/2;
                    // attach negative and pixel for CSS rule
                    hWide = '-' + hWide + 'px';
                    $(this).addClass("js-fix").css({
                        "margin-left" : hWide
                        });
                    });
                }
            else {
                bg2.each(function(){
                    $(this).removeClass("js-fix").css({
                        "margin-left" : 0 + 'px'
                        });
                    });
                };
        } else {
            bg2.removeClass('bgheight').addClass('bgwidth');

            bg2.each(function(){
                $(this).removeClass("js-fix").css({
                    "margin-left" : 0 + 'px'
                });
            });
        }

    });


}

theWindow.resize(function () {
    resizeBg();
}).trigger("resize");

});

4

2 回答 2

1

所以我试了一下。基本上你只需要重构你的代码，让它更通用，并且可以在你的 jQuery 对象中的每个元素上工作。我不确定这是否正是您想要的，我并没有真正关注代码中发生的事情，我只是对其进行了通用化，这样您就不必两次编写相同的代码。它可能可以进一步重构，这只是为了让您了解应该做什么。

于 2012-04-07T00:24:27.290 回答
0 
$('.block').each(function() {
    var $block = $(this), 
    blockWidth = $block.width(),
    blockHeight = $block.height(),
    blockRatio = blockWidth / blockHeight,
    className = $block.attr('class'),
    $bg = $('.bg' + className.substr(className.length-1)),
    bgWidth = $bg.width(),
    bgHeight = $bg.height(),
    bgRatio = bgWidth / bgHeight;

    if (blockRatio < bgRatio) {
        $bg.removeClass('bgwidth').addClass('bgheight');
        if(bgWidth > blockWidth) {
            $bg.addClass('js-fix')
            .css('margin-left',
            '-' + ((bgWidth - blockWidth)/2) + 'px';
        } else {
            $bg.removeClass('js-fix').css('margin-left','0');
        }
    } else {
        $bg.removeClass('bgheight').addClass('bgwidth')
        .removeClass('js-fix').css('margin-left','0');
    }
});

仅供参考：0px === 0pt === 0em === 0

于 2012-04-07T01:35:48.073 回答