在jQuery中應用css（）後的新值

我正在縮放div以便在不滾動的情況下可見。所以，我有：在jQuery中應用css（）後的新值

var sliderOffset = $('.field-slideshow-wrapper').offset().top, 
    windowHeight = $(window).height(), 
    sliderAllowed = (windowHeight - sliderOffset), 
    sliderImage = $('.field-slideshow-slide img').height(), 
    sliderOriginal = (sliderImage + 150), 
    scale = (sliderAllowed/sliderOriginal); 

$('.field-slideshow-wrapper').css({ transform: 'scale(' + scale + ')'});

現在該分區是不是從頂部，前相同的位置，我需要確定新的自頂偏，應用css({ transform: 'scale(' + scale + ')'後，這樣我就可以計算出一定的餘量，以推動這一檔位已到頂端。

如何確定元素的新的offset().top？

來源

2016-10-28 mixerowsky

使一個jsfiddle。爲什麼要加150px？ –

請分享你的完整代碼。 –

你可以激活你的代碼在每個windows.resize書房它會自動縮放你的分區 – Zorken17

以及剛剛得到新的偏移量已應用後縮放

...  
$('.field-slideshow-wrapper').css({ transform: 'scale(' + scale + ')'}); 
var newOffset = $('.field-slideshow-wrapper').offset().top;

來源

2016-10-28 12:49:26

有兩種方法可以做到這一點，是你的選擇。 transform: scale()將元素縮小到其中心，因此元素的頂部向下移動。縮放的元素仍然會返回未縮放的元素的offset().top，所以不起作用。

一種方法是確保新縮放的元素將粘貼到舊元素空間的頂部。只是這樣做：

$('.field-slideshow-wrapper').css({ 
    transform: 'scale(' + scale + ') translateY(-50%)' 
});

這使該元素以其新的高度的50％拉昇，因此堅持自己的老維的頂部。

另一種選擇是做一些簡單的計算。獲取舊元素的height，然後獲取scale（）方法將其「向下」移動的像素數。你可以找到一些計算數量（見下文），這是您可以添加到舊偏移量（數量）頂部，以獲得新的一個：

var sliderOffset = $('.field-slideshow-wrapper').offset().top, 
      windowHeight = $(window).height(), 
      elHeight = $('.field-slideshow-wrapper').innerHeight(), 
      sliderAllowed = (windowHeight - sliderOffset), 
      sliderImage = $('.field-slideshow-slide img').height(), 
      sliderOriginal = (sliderImage + 150), 
      scale = (sliderAllowed/sliderOriginal); 
var addProportion = 1-scale/2; 

var newOffset = sliderOffset + (addProportion * elHeight);

你是否應該使用innerHeight（）或outerHeight （）取決於你的佈局。

來源

2016-10-28 12:52:23 KWeiss

在jQuery中應用css（）後的新值

回答

相關問題