jquery scale從屏幕中心點開始的div的高度和寬度

我處於製作定製幻燈片的情況。爲此，我需要製作一個div元素並附加到body。以及我爲屏幕居中，使用屏幕寬度和高度，但我無法從屏幕的中心點使該div比例。jquery scale從屏幕中心點開始的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();

這是我正在使用的功能。但比例不是開始和結束在屏幕的中心。還有什麼好的想法可以定位圖像中心？

來源

2011-09-12 3gwebtrain

喲可以proberbly使用一個MINUS保證金，而不是。

 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的一半 - 使它從頂部和左側居中:)

EDIT

猜猜這是你想要的嗎？

http://jsfiddle.net/V5KLa/

來源

2011-09-12 06:18:14

你是對的，但是你的信息可以在靜態情景中使用。我們如何將它用於動畫目的？因爲我需要從0到100進行縮放？ – 3gwebtrain

但是，你的動畫劑量有很大的意義..你不改變高度和，但你有動畫他們。你在動畫之後隱藏你的盒子？ –

已更新線程... :) –

jquery scale從屏幕中心點開始的div的高度和寬度

回答

相關問題