Question

我的脚本将图像src添加到叠加层的图像中并在此意义上正常工作。问题是当我创建变量imgH以应用为margin-top的值时。我把它抓住图像的高度并分成两半。

当值以.5结尾时，我遇到了问题所以我使用safeInt = Math.floor(iH),删除了值的任何小数。

在我的投资组合中，居中非常随机或对叠加层应用0。我无法弄清楚什么是不允许变量正确使图像居中。

我对jquery有点经验，所以如果这是一个新手的错误，我道歉。

这是jQuery：

function imgOverlay() {
    $('.codeCont img').on('click', function() {
        var imgData = $(this).attr('data');

        $('.overlay').fadeIn().find('img').attr('src', imgData);

        if ($('.overlay img').attr('src') === 'images/vec-3.jpg') {
            $('.overlay').addClass('imgLong');
        }
        else {
            $('.overlay').removeClass('imgLong');
        }

        $('.close').on('click', function() {
            $('.overlay').fadeOut();
        });

        var iH = $('.overlay img').height()/2,
            safeInt = Math.floor(iH),
            imgH = "-" + safeInt + 'px';

        $('.overlay').css({
            'margin-top' : imgH
        });
    });
}

imgOverlay();

最后，小提琴：Demo - 如果你从左到右穿过图像，你会看到margin-top上的随机行为。

这是一个direct link to the site，可以看到最明显的问题。

Answer 1

在图像加载到图像之前，您将获得图像的高度。您需要在图像的加载处理程序中执行计算并设置页边距顶部，例如

function imgOverlay() {
   ...
   $('.overlay img').load(overlayLoad);
}

function overlayLoad()
{
   var iH = $('.overlay img').height()/2,
            safeInt = Math.floor(iH),
            imgH = "-" + safeInt + 'px';

    $('.overlay').css({
      'margin-top' : imgH
    });
}

图像叠加的居中问题

1 个答案: