单击时在“全局窗口/视口”中有一个图像中心（JS或CSS）

Question

当我单击在视口中居中的图像时（例如灯箱效果），我想要它。

我在这里http://codepen.io/emilychews/pen/OpXKGd设置了一支笔，并试图找出实现此目的的最佳方法，但我似乎遇到了麻烦。

我在演示中包含了多个元素，因为我希望它可以使窗口使用它作为居中容器，而不仅仅是父元素。 我将在wordpress网站上使用此工具，因此对我来说，仅添加包装器是不可行的。

另外，如果您看一下演示，此刻元素可以平滑地缩放，我希望它在缩放时在窗口对象中居中对齐，作为过渡的一部分。

我赞赏只有在JS / jQuery中才有可能实现，我在示例中包含了一些内容。

我的快速参考代码是：

HTML

<div class="wrapper">
  <div class="holder image1">Image 1</div>
  <div class="holder image2">Image 2</div>
  <div class="holder image3">Image 3</div>
  <div class="holder image4">Image 4</div>
  <div class="holder image5">Image 5</div>
</div>

CSS：

.holder {
width: 20vw;
height: 400px;
background: red;
position: relative;
display: inline-block;
margin-bottom: 5px;
transition: all .75s ease-out;
}

// ======== THIS IS THE CLASS THAT IS ADDED WITH JQUERY
.fullsize {
background: blue;
z-index: 2;
position: relative;
transform: scale(1.75);
transform-origin: center center;
transition: all .75s ease-out;
}

jQuery的：

$(document).ready (function(){

  $('.holder').click(function() {

      $( this ).toggleClass('fullsize');
      $( this ).css('z-index', '+=1');

  });

});

任何帮助/解决方案都将是惊人的。

艾米丽:)

Answer 1

我相信您正在寻找的是在全尺寸图片上设置一个left属性。 请注意，您还需要使用position: absolute ，以使每个元素偏移相同的量（将它们集中）。

.fullsize {
  position: absolute;
  left: 40vw;
}

我创建了一个更新的CodePen， 在这里展示了这一点 。

请注意，您还可能希望给它们更高的z索引，因为.fullsize元素有时会在常规图像后面被遮盖。

希望这可以帮助！ :)

Answer 2

尝试这个。 这有点跳动，需要一些摆弄，但它可以为您提供所需的东西。

将.holder更改为：

.holder {
width: 20vw;
height: 100px;
background: red;
position: static;
display: inline-block;
margin-bottom: 5px;
transition: all .75s ease-out;
 z-index:0;
  transform-origin: top left;
}

将.fullsize更改为：

.holder.fullsize {
background: blue;
z-index: 200;
transform: scale(1.75);
transition: all .75s ease-out;
  position:absolute;  
}

并将您的JQuery更改为

$(document).ready (function(){

  $('.holder').click(function() {
    var $scaleFactor = 1.75;
      $( this ).toggleClass('fullsize');
    var $winWidth = $(window).width();
    var $myWidth = $(this).width();
    var $newWidth = $myWidth*$scaleFactor;
    var $left = $winWidth/2-$newWidth/2;
    $(".holder").text($left);
    $(this).animate({    
      left:$left+"px"
    },200);

  });

});

相反，在JQuery中设置缩放比例可能会给您一个更平滑的过渡。