jquery 从屏幕中心点缩放 div 的高度和宽度

Question

我正在制作定制幻灯片。为此，我需要创建一个 div 元素并将其附加到正文。我也使用屏幕宽度和高度将其置于屏幕中心，但我无法从屏幕中心点调整该 div 比例..

我需要的是，我创建的 div 具有 0px 高度和 0px 宽度，在这种状态下，它需要缩放到我要附加图像的大小。因此，当它获取图像大小(我将其保存在数组中)时，它需要缩放数组提供的高度和宽度。但它应该从屏幕中心开始。

如何实现从屏幕中心开始的 div 比例？

$('#slideHolder').appendTo('body').css({border:'1px solid red'});
           var getHCenter = ($(window).width() - $('#slideHolder').outerWidth())/2;
           var getVCenter = ($(window).height() - $('#slideHolder').outerHeight())/2;
           $('#slideHolder').css({left:getHCenter,top:getVCenter}).animate({height:$('#slideHolder').outerHeight()+'px',width:$('#slideHolder').outerWidth()+'px'},100).hide();

这就是我正在使用的功能。但比例不是在屏幕中央开始和结束。有什么好主意来缩放以及定位图像中心吗？

Answer 1

您可能可以使用负边距来代替。

       var getWidth = $('#slideHolder').outerWidth())/2;
       var getHeight = $('#slideHolder').outerHeight())/2;

然后在元素上设置:

Left: 50%;
Top: 50%;
Margin: -getHeight 0 0 -getWidth

与:

$('#slideHolder').css('left':'50%','top':'50%','margin':'-'+getHeight+' 0 0 -'getWidth);

它的作用是从左侧和顶部发送 50%，然后给出 #slideHolder 的负边距一半 - 使其从顶部和左侧居中:)

编辑

你猜这就是你想要的吗？

http://jsfiddle.net/V5KLa/