javascript 在鼠标悬停时显示全尺寸图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10963908/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
On mouse hover show full size image
提问by Yahoo
I have 2 links for the same image. One is a thumbnail which is being displayed on the screen. The second link is the full size image of the thumbnail.
我有同一张图片的 2 个链接。一种是正在屏幕上显示的缩略图。第二个链接是缩略图的全尺寸图像。
How can I code this so that when the mouse hovers over the image the screen turns black and just the full screen image is shown?
我该如何编码，以便当鼠标悬停在图像上时，屏幕变黑，只显示全屏图像？
<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>
On mouse hover
在鼠标悬停时
- Make screen black
- Load
Fullsizeimage.jpgin the centre of the screen
- 使屏幕变黑
Fullsizeimage.jpg在屏幕中央加载
回答by Lix
Well what you could possibly do is place a div element above all other elements (use 100% width and height, position:absoluteand z-index). Make it hidden by default. Then when you are ready to display an image, make that div visible and load the full size image into it. You can make the screen black simply by giving that div some css properties - background-color:black.
那么你可以做的是将一个 div 元素放在所有其他元素之上（使用 100% 的宽度和高度，position:absolute以及z-index）。使其默认隐藏。然后，当您准备好显示图像时，使该 div 可见并将完整大小的图像加载到其中。您可以简单地通过为该 div 提供一些 css 属性来使屏幕变黑 - background-color:black。
You'll want to modify your HTML to have the small image contain a reference to the large image. Something like this -
您需要修改 HTML 以使小图像包含对大图像的引用。像这样的东西——
<div id= "smallImage" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>
For the actual loading of the image, you'd want to do something like this -
对于图像的实际加载，您需要执行以下操作 -
$("#smallImage").on('mouseover',function(){
var smallImage = $(this);
var largeReference = smallImage.attr('rel');
$("#largeImage").attr('src',largeReference);
});
Then the HMTL for the large image would be -
那么大图像的 HMTL 将是 -
<img id="largeImage" src="" />
Don't forget to allow the user to close this large image view.
不要忘记允许用户关闭这个大图像视图。
回答by Ajay Beniwal
Use the Below CSS to display black div on hover property of an image
使用下面的 CSS 在图像的悬停属性上显示黑色 div
`#1 Img:hover +div {
position:fixed;
top:0px;
left:0px;
width:"set the width";
height :"set the height";
}`
回答by Mahesh Bansod
function fullscreen1() {
img = document.getElementById('img1')
img.src = "/fullsizeimage.jpg"
img.style = "position:fixed;top:30px;left:30px;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"}
function fullscreen2() {
img = document.getElementById('img2')
img.src = "/fullsizeimage2.jpg"
img.style = "position:fixed;top:30px;left:30px;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"}
<div id= "1" class="thumbnail"><a href="/fullsizeimage.jpg" onmouseover="fullscreen1()"><img id="img1" scr="/thumbnail.jpg"> </a></div>
<div id= "2" class="thumbnail"><a href="/fullsizeimage2.jpg" onmouseover="fullscreen2()"><img id="img2" scr="/thumbnail2.jpg"> </a></div>
dont forget to put the close link as suggested in one of the answers
不要忘记按照答案之一的建议放置关闭链接
