javascript - 将子类与父类垂直对齐

Question

我正在开发一个网页，用户可以在其中通过悬停来显示较大的图像或预览每个缩略图。

我正在使用此 Jquery 代码响应式地在屏幕上显示和居中较大的图像。

var timer;
$(".theme-preview").hover(function() {
    var self = $(this);

    timer = setTimeout(function() {
      timer = false;

      $(self).children('.popup-preview').fadeIn("slow");

      $(self).children('.popup-preview').css("position", "fixed");
      $(self).children('.popup-preview').css("top", ($(window).height() / 2) - ($(self).children('.popup-preview').outerHeight() / 2));
      $(self).children('.popup-preview').css("left", ($(window).width() / 2) - ($(self).children('.popup-preview').outerWidth() / 2));

    }, 800);

    //return false;
  },
  function() {
    if (timer) {
      clearTimeout(timer);
      timer = false;
    } else {
      $(this).children('.popup-preview').fadeOut("fast");
    }

    //return false;
  }
);

如何让大图与父类垂直对齐？

Here is my working sample code.

更新:示例是当缩略图位于屏幕顶部或底部并且悬停时。较大的图像应垂直居中显示在屏幕上。

Answer 1

让你的 .popup-preview '绝对' 离开:0；顶部:50%；并添加转换:translateY(-50%);

var timer;
  $(".theme-preview").hover(function() {
      var self = $(this);
    
      timer = setTimeout(function(){
        timer = false;
        
        $(self).children('.popup-preview').fadeIn("slow");
      
        $(self).children('.popup-preview').css("position","absolute");
        $(self).children('.popup-preview').css("left","0");
        $(self).children('.popup-preview').css("top","50%");
      }, 800);

      //return false;
    }, 
    function () {
      if(timer){
        clearTimeout(timer);
        timer = false;
      }else{			
          $(this).children('.popup-preview').fadeOut("fast");
      }

      //return false;
    }
  );

.popup-preview{
 	background: black;
	position: absolute;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform: translateY(-50%);
	z-index: 1;
	display: none;	
}

.col-md-6{
  float: left;
  margin-top: 50px;
}

.theme-preview {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
</div>