將子類與父類垂直對齊

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>