Question

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

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

函数“resizeBg”中的两个函数是相同的，除了它们指向包含不同类（“.bg1”和“.bg2”的图像的不同div（“。block1”和“。block2”）这一事实。 “）。

我需要将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");

}）;

Answer 1

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

Answer 2

$('.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

each（）函数。有人可以告诉我如何缩短这段代码

2 个答案: