将子类垂直对齐父类

时间：2017-04-03 03:54:32

标签： javascript jquery html css

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

我正在使用这个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;
  }
);

如何将较大的图像与父类垂直对齐？

Demo here

Here is my working sample code.

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

Should display visibly on the screen

4 个答案:

答案 0 :(得分：2)

Jus让你的.popup-preview'绝对' 并离开：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{			
          $(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>

答案 1 :(得分：1)

尝试将位置更改为绝对

        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

答案 2 :(得分：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));

答案 3 :(得分：0)

＆＃13;
＆＃13; 
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;
  }
);
＆＃13; 
.popup-preview {
  background: black;
  position: absolute;
  z-index: 1;
  top: 0;
  display: none;
}

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

.theme-preview {
  position: relative;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题