0

私は現在jQueryの学習を始めたばかりで、思い通りに動作させることができるようですが、私が書いている方法はあまり効率的ではないと感じています. 以下のこの例で誰かが私を助けてくれますか:

$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});

    $(window).resize(function() {
        $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
    });

ここでは、画面の中央に div を配置しています。そして、コンテンツの幅のプロパティがパーセンテージ値であるため、ウィンドウのサイズ変更時にも再度実行します。それは完全に機能しますが、これを書くにはもっと良い方法があるに違いないと感じずにはいられません。どんな助けでも大歓迎です。ありがとうございました

4

4 に答える 4

1

オブジェクトをキャッシュし、サイズ変更イベントをトリガーすることができます。これにより、サイズ変更ハンドラーが DOM Ready で実行されます。

$(window).resize(function() {
    var $elem = $('.tiles-wrapper');
    $elem.css({
        top: '50%',
        left: '50%',
        margin: '-' + ($elem.height() / 2) + 'px 0 0 -' + ($elem.width() / 2) + 'px'
    });
}).resize()
于 2012-12-15T13:35:15.533 に答える
0 
var $tilesWrapper = $('.tiles-wrapper');

function setWrapperStyle () {
  var halfWidth = $tilesWrapper.width() * 0.5;
  var halfHeight = $tilesWrapper.height() * 0.5;
  $tilesWrapper.css({
    top: '50%',
    left: '50%',
    margin: '-' + halfHeight + 'px 0 0 -' + halfWidth + 'px'
  });
}

setWrapperStyle();
$(window).on('resize', setWrapperStyle);
于 2012-12-15T13:43:40.473 に答える
0

最初の行で関数を作成する必要があります:

function center(){
    $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
}

次に、最初に呼び出し、ウィンドウのサイズを変更するときに呼び出します。

center();
$(window).resize(center);
于 2012-12-15T13:43:41.710 に答える
0

ここでjqueryが本当に必要ですか？直接cssを使用できます

.tiles-wrapper{
top:50% ;
left:50% ;
width: //what u given
height: //what u given
margin-left: //tiles width/2
margin-right: //tiles height/2
position: //absolute or float
}

高さと幅を動的に計算したい場合は、ドキュメントの準備ができてこれを書くだけです

var $elem = $('.tiles-wrapper');
    $elem.css({
        top: '50%',
        left: '50%',
        margin: '-' + ($elem.height() / 2) + 'px 0 0 -' + ($elem.width() / 2) + 'px'
    });

サイズ変更では、自動的に中央に配置されます。

于 2012-12-15T14:21:30.507 に答える