[英]On mouse hover show full size image
我有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>
在鼠標懸停
Fullsizeimage.jpg
那么你可能做的是將div元素放在所有其他元素之上(使用100%寬度和高度, position:absolute
和z-index
)。 默認情況下將其隱藏。 然后,當您准備好顯示圖像時,使該div可見並將完整尺寸的圖像加載到其中。 你可以簡單地通過給div一些css屬性 - background-color:black
來使屏幕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="" />
不要忘記允許用戶關閉此大圖像視圖。
`#1 Img:hover +div {
position:fixed;
top:0px;
left:0px;
width:"set the width";
height :"set the height";
}`
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>
別忘了按照其中一個答案中的建議放置關閉鏈接
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.