将子类与父类垂直对齐

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

我怎样才能对准较大的图像垂直与父类一样吗？

使用getBoundingClientRect()函数获取theme-preview div的当前边界。然后计算相应的左侧和顶部。

var currentRect = self[0].getBoundingClientRect(); 

... 

var previewPopup = self.children('.popup-preview'); 
     previewPopup.fadeIn("slow"); 

     previewPopup 
     .css("position", "fixed") 
     .css("top", currentRect.top - 20) 
     .css("left", (currentRect.left + (self[0].clientWidth/2)) - (self.children('.popup-preview').outerWidth()/2)); 

jsFiddle v1

---

更新。这应该根据父宽度和高度居中。 jsFiddle v2

previewPopup 
     .css("position", "fixed") 
     .css("top", currentRect.top + ((self[0].clientHeight/2) - (self.children('.popup-preview').outerHeight()/2))) 
     .css("left", (currentRect.left + (self[0].clientWidth/2)) - (self.children('.popup-preview').outerWidth()/2)); 

Answer 2

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

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

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

 

 
    }, 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; 
 
    z-index: 1; 
 
    top: 0; 
 
    display: none; 
 
} 
 

 
.col-md-6 { 
 
    float: left; 
 
} 
 

 
.theme-preview { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

Answer 3

刚刚尝试改变现在的位置是绝对

 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("top", '0'); 
        $(self).children('.popup-preview').css("left", 'auto'); 

       }, 800); 

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

       //return false; 
      } 
     ); 

Here's the fiddle

Answer 4

物权法让你.popup预览 '绝对' 和左：0;顶部：50％;并添加transform：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{ \t \t \t 
 
      $(this).children('.popup-preview').fadeOut("fast"); 
 
     } 
 

 
     //return false; 
 
    } 
 
);

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

 
.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>