0

margin-topとのmargin-left値を要素のそれぞれのサイズの半分に設定して、中央に配置しようとしています。ただし、左側と上部では 50% になります。

    var $img = document.getElementsByClassName('box'); 
    var $width = $img.clientWidth;
    var $height = $img.clientHeight;
    $('#overlay').append('<div id="boxOverlay"></div>');
    $('#boxOverlay').css('position', 'fixed');
    $('#boxOverlay').css('top', '50%');
    $('#boxOverlay').css('margin-top', '-$height/2');
    $('#boxOverlay').css('left', '50%');
    $('#boxOverlay').css('margin-left', '-$width/2');
    $('#boxOverlay').css('max-height','80%');
    $('#boxOverlay').css('max-width','90%');
    $('#boxOverlay').height($height);
    $('#boxOverlay').width($width);
4

3 に答える 3

2

これを試して：

var $img = $('.box');
var $width = $img.width();
var $height = $img.height();
// ...
$('#boxOverlay').css('margin-top', (($height / 2) * -1));
$('#boxOverlay').css('margin-left', (($width / 2) * -1));

フィドル

また、スタイル オブジェクトを css メソッドに渡すことをお勧めします。

var styles = {
    'margin-top': (($height / 2) * -1),
    'margin-left': (($width / 2) * -1)
};

$('#boxOverlay').css(styles);

このアプローチでは、DOM を 1 回だけクエリするだけで、複数回の再描画やリフローを回避できます (引用が必要です)。

于 2013-08-26T01:38:45.170 に答える
1

jquery では、margin-left は marginLeft です。試すことができるダッシュの中央を削除します。

$('#boxOverlay').css('marginTop', '-$height/2');
$('#boxOverlay').css('maxHeight','80%');
$('#boxOverlay').css('maxWidth','90%');
于 2013-08-26T01:45:07.467 に答える
0

使用する変数を囲む一重引用符を取り除きます。変数の周りに引用符を追加すると、実際には関数 [.css()] に変数ではなく文字列リテラルが渡されます。

MDN-文字列

于 2013-08-26T01:50:29.963 に答える