Question

“冰白”和“紫罗兰”的弹出图像在不同的地方弹出。如何让它们只在一个位置弹出？

Answer 1

您是否可以定义一个使用绝对位置的div，然后将鼠标悬停在Violet或Ice White上，在您创建的div中绘制弹出图像？

类似于：

var displayDiv = document.getElementById("displayDivID");

// draw popup image in the div
displayDiv.innerHTML = "<div id=\"violet\">...</div>";
displayDiv.style.display = "block"; // to show it

这样，每当你需要在同一个位置显示图像时，它总是被绘制在你指定的div内。

我认为你有一个类来控制div的格式，比如位置和边框等。

修改

我从您的网站上获取了您的代码并添加了更多代码。

将此代码作为html页面保存到您的计算机上并尝试使用。

在结束标记之前查找最后一个css代码段。那个css块控制着div的外观并将其定位在页面中间。 css只设定一个固定的位置。或者，您可以使用javascript动态计算用户浏览器窗口的宽度和高度，然后相应地渲染css代码，这样无论内部图像尺寸如何，div始终位于浏览器的中间位置。

在您以前的displayDiv的javascript代码段中，我已修复了一些内容，并添加了两个函数，用于鼠标悬停在缩略图上以及缩略图之外的时间。鼠标悬停时，会将图像的url传递给将用于将图像渲染到displayDiv中的函数。

希望有所帮助。

编辑2 - 淡入淡出

你当然可以。

您需要做的就是将两个函数更改为使用jQuery fadeIn（）和fadeOut（），如下所示：

function changeDisplay(bgImageURL)
{
    var displayDiv = document.getElementById("displayDiv");

    // draw popup image in the div
    displayDiv.innerHTML = 
    '<a class="popup1" href="#v"><img src="' + bgImageURL+ '" alt="" /></a>';

    // show the display in case it was hidden before    
    $('#displayDiv').fadeIn();
}

function hideDisplay()
{   
    // hide it when the mouse rolls off the thumbnail
    $('#displayDiv').fadeOut();
}

这个jQuery是一个基本的。如果你快速地在缩略图上移动鼠标，它会产生一个问题，即使你的鼠标已经不在缩略图上，它也会导致显示器div打开和关闭，打开和关闭，打开和关闭。

正确的方法是重做代码并在thubmnail元素上使用mouseEnter和mouseLeave。

弹出图像不会停留在同一个地方

1 个答案:

修改

编辑2 - 淡入淡出