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 回答