在屏幕中央显示图像 CSS jQuery

showing image in center of screen css jquery

本文关键字：图像 CSS jQuery 显示图 显示 屏幕      更新时间：2023-09-26

我试图在jquery和CSS中悬停缩略图时显示一个大图像。我有 2 张图片作为 

      <td>
        <% if camera["is_public"] == "t" %>
          <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?" height="32" class="thumbnails">
          <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?" height="600" class="full-image">
        <% else %>
          <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?api_id=<%= camera["api_id"] %>&api_key=<%= camera["api_key"] %>" height="32" class="thumbnails">
          <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?api_id=<%= camera["api_id"] %>&api_key=<%= camera["api_key"] %>" height="600" class="full-image">
        <% end %>
      </td>

和 CSS 作为 

.full-image {
  display: none;
  z-index: 99999;
  top: 10%;
  width: 600px;
  height: auto;
  right: 34%;
}

悬停.thumbnail触发此功能

onImageHover = ->
  $("#snapshots_datatables").on "mouseover", ".thumbnails", ->
    nextImage = $(this).siblings(".full-image")
    $(nextImage).css({"top": "10%"})
    nextImage.show()
  $("#snapshots_datatables").on "mouseout", ".thumbnails", ->
    nextImage.hide()

我所有的问题是我想在屏幕中央悬停.thumbnail但是显示height: 600图像，关于屏幕尺寸和滚动。即使我向下滚动图像也应该在屏幕中央显示。任何帮助将不胜感激。我自己添加CSS的运气为零。

编辑：与引导模型相同，即使它在屏幕中单击非常下方，但它出现在屏幕中间。

你真的不需要javascript。我认为 css 可以解决问题。

首先，您要确保 .full-image 始终位于屏幕中央。 

.full-image {
  position: fixed;
  width: 600px;
  height: 600px;
  left: 50%;
  top: 50%;
  margin-left: -300px;
  margin-top: -300px;
  background: red;
  display: none;
}

然后，您希望在将鼠标悬停在 .thumbnail 上时使其显示

.thumbnail:hover .full-image {
  display: block;
}

这是工作演示
http://codepen.io/Jeffersonvdh/pen/GZBMBQ

相关文章：