我正在缩放div,以便在不滚动的情况下可见。所以我有:
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 + ')'});
现在div与之前的位置不同,我需要在应用css({ transform: 'scale(' + scale + ')'
后确定从顶部开始的新偏移量,所以我可以计算一些余量来将此div移动到顶部。 / p>
如何确定元素的新offset().top
?
答案 0 :(得分:3)
有两种方法可以做到这一点,你可以选择。 transform: scale()
将元素向中心缩小,因此元素的顶部向下移动。缩放元素仍将返回未缩放元素的offset().top
,因此无效。
一个选项是确保新缩放的元素将粘贴到旧元素空间的顶部。就这样做:
$('.field-slideshow-wrapper').css({
transform: 'scale(' + scale + ') translateY(-50%)'
});
这使得元素向上移动了新高度的50%,从而将其固定在旧尺寸的顶部。
另一种选择是做一些简单的计算。获取旧元素的height
,然后获取scale()方法将其“向下”移动的像素数。您可以通过一些计算找到该数字(见下文),这是您可以添加到旧偏移量()。top的数字以获得新的数字:
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()取决于您的布局。
答案 1 :(得分:0)
在应用缩放
后,只需获取新的偏移量...
$('.field-slideshow-wrapper').css({ transform: 'scale(' + scale + ')'});
var newOffset = $('.field-slideshow-wrapper').offset().top;