帶圖像疊加的居中問題

我有我的腳本將圖像src添加到疊加層的圖像並在此意義上正確工作。問題是當我創建我的變量imgH作爲margin-top的值應用。我已經抓住了圖像的高度並將其分成一半。帶圖像疊加的居中問題

我的問題是，當一個值以.5結尾時，所以我用safeInt = Math.floor(iH),刪除了該值的任何小數。

在我的投資組合中，居中是非常隨機的，或者將0應用於疊加層。我無法弄清楚什麼不允許變量正確地居中圖像。

我是一個有點japery的經驗，所以我很抱歉，如果這是一個新手的錯誤。

這裏是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看到最清晰的問題。

來源

2014-03-06 Josh Powell

您準備怎麼做？你爲什麼要將邊距設置爲覆蓋層高度的一半？ – bdrx

我想抓住疊加層圖像的高度，然後將其分成一半。然後將該數字應用於疊加層，作爲負邊距頂部以將圖像居中。 –

在圖像加載到頁面上之前，您已經獲得圖像的高度。您需要執行計算並在圖像的負載處理程序中設置頁邊距，例如

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

來源

2014-03-06 03:50:38 bdrx

帶圖像疊加的居中問題

回答

相關問題