3

ドキュメントにposition: absoluteDIVがあります。私はそれを（ドキュメント上のどこにでも）特定のサイズに成長させながら中央に到達させたい（すべてがアニメーション化されている）jQueryのアニメーションを使用しようとしました：

$('#el').animate({
        width: 600,
        height: 600,
        top: "-20%",
        left: "-50%"
    },1200);

多くのバリエーションがありますが、数学がどのように行われるべきかについては、私は自分の心を設定することができません。

4

1 に答える 1

1

現在のウィンドウの幅と高さに基づいて上下を計算し、必要に応じてターゲットDIVと高さを減算し、結果を2で割って中心点を取得する必要があります。

たとえば、現在のウィンドウの幅= 1200ピクセル、DVIターゲットの幅600ピクセルで左の位置を計算するには、次のようにします。（WindowWidth-DivTargetWidth）/ 2 = leftPosition; （1200-600）/ 2 = 300;

同じことが、関連する高さの値から上部の位置を計算する場合にも当てはまります。

以下が機能するはずです。

var targetWidth = 600;
var targetHeight = 600;
var targetTopPosition = ($(window).height() - targetHeight) / 2;
var targetLeftPosition = ($(window).width() - targetWidth) / 2;

console.log(targetTopPosition);

$('#el').animate({
    width: targetWidth,
    height: targetHeight,
    top: targetTopPosition,
    left: targetLeftPosition
}, 1200);​

デモ-DIVの中央揃えと拡大

上記のデモのフルスクリーンバージョンのリンクは次のとおりです。

于 2012-09-02T18:11:51.080 に答える