javascript - 在鼠标悬停时显示全尺寸图像

Question

同一张图片我有 2 个链接。一个是正​​在屏幕上显示的缩略图。第二个链接是缩略图的全尺寸图像。

我该如何编写代码，以便当鼠标悬停在图像上时屏幕变黑，只显示全屏图像？

<div id= "1" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>
<div id= "2" class="thumbnail"><a href="/fullsizeimage2.jpg"><img scr="/thumbnail2.jpg"> </a></div>

鼠标悬停

1. 黑屏
2. 在屏幕中央加载Fullsizeimage.jpg

Answer 1

那么您可以做的是将一个 div 元素放在所有其他元素之上(使用 100% 宽度和高度、position:absolute 和 z-index)。让它默认隐藏。然后，当您准备好显示图像时，使该 div 可见并将全尺寸图像加载到其中。您只需为该 div 提供一些 css 属性即可使屏幕变黑 - background-color:black。

您需要修改 HTML 以使小图像包含对大图像的引用。像这样的 -

<div id= "smallImage" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>

对于图像的实际加载，你会想做这样的事情 -

$("#smallImage").on('mouseover',function(){
  var smallImage = $(this);
  var largeReference = smallImage.attr('rel');
  $("#largeImage").attr('src',largeReference);
});

那么大图像的 HMTL 将是 -

<img id="largeImage" src="" />

不要忘记允许用户关闭这个大 ImageView 。