Jquery将Div移动到屏幕中心（Masonry JS）答案

【问题标题】：Jquery Move Div to Center of Screen (Masonry JS)Jquery将Div移动到屏幕中心（Masonry JS）
【发布时间】：2014-01-25 14:20:29
【问题描述】：

我正在使用 Jquery Transit 和 Masonry JS。我的 div 中有一个按钮，单击该按钮时，应将容器位置更改为固定并将其移动到屏幕的中心（使用 Jquery Transit）。但是，单击时，框会移动到屏幕的右下角.

您可以查看jsfiddle 来查看我的问题。

javascript：

  WebFont.load({
    google: { families: [ 'Signika:400,700:latin', 'Open+Sans::latin', 'Hammersmith+One::latin' ]},
    active: triggerMasonry,
    inactive: triggerMasonry
  });
var $container;

function triggerMasonry() {
  // don't proceed if $container has not been selected
  if ( !$container ) {
    return;
  }
  //Joocy 
  // init Masonry
$container.imagesLoaded( function() {
  $container.masonry({
    itemSelector: '.p-small',
    "columnWidth": '.grid-size',
    gutter:10
  });
  });
}

// trigger masonry on document ready
  $container = $('#omni-content');
  triggerMasonry();
    var $cards = $('.p-small');
    var cardInFocus = null;

    $cards.each(function(index, elem){
        var $elem = $(elem);
        var pos = $elem.position();
        $(elem).data('orig-x', pos.left);
        $(elem).data('orig-y', pos.top);
    });

    var reset = function(){
        if(cardInFocus){
            $(cardInFocus).transition({x:0,y:0});}      
    };

    $(".o-help").click(function(e) {
        cardInFocus = $(this).closest(".p-small");
        var $doc = $(document);
        var centerX = $doc.width() / 2;
        var centerY = $doc.height() / 2;
        var $card = $(this).closest(".p-small");
        var widthcard = $card.width();
        $(".explain").css('position','fixed');
        $(".explain").css('width', widthcard);
        $card.addClass('explain');
        var origX = $card.data('orig-x');
        var origY = $card.data('orig-y');
        $(".modal-bg").fadeIn("slow");
        $(this).closest(".p-small").transition({x:centerX - origX,y:centerY-origY, duration:750});
    });

    $cards.blur(function(e){
        reset();
    });

【问题讨论】：

似乎工作正常。但是在您当前的实现中，您将容器的左上角移动到屏幕的中心。这就是为什么您可能认为它不起作用的原因。您想将容器的中心移动到屏幕的中心吗？
@Yevgeniy.Chernobrivets 是的，但这行不通。当我尝试时它仍然偏离中心
这是你想要的jsfiddle.net/JS6dX/2 吗？
@Yevgeniy.Chernobrivets 是的，几乎完全符合我的要求。有些容器有点靠右，但没关系。谢谢！

标签： javascript jquery css jquery-masonry jquery-transit

【解决方案1】：

问题是您将容器的左上角移动到容器的中心而不是中心。这就是为什么你可能认为它没有居中。要移动容器的中心，您需要补偿容器的一半宽度和一半高度。

$(".o-help").click(function(e) {
    cardInFocus = $(this).closest(".p-small");
    var $doc = $(document);
    var centerX = $doc.width() / 2;
    var centerY = $doc.height() / 2;
    var destX = centerX - cardInFocus.width()/2;
    var destY = centerY - cardInFocus.height()/2;
    var $card = $(this).closest(".p-small");
    var widthcard = $card.width();
    $(".explain").css('position','fixed');
    $(".explain").css('width', widthcard);
    $card.addClass('explain');
    var origX = $card.data('orig-x');
    var origY = $card.data('orig-y');
    $(".modal-bg").fadeIn("slow");
    $(this).closest(".p-small").transition({x:destX -  origX,y:destY-origY, duration:750});
});

您可以查看this fiddle查看结果。

【讨论】：