放大图像并用鼠标指针移动它

Question

对不起,如果这对我来说似乎微不足道,但是......

我有一些图像,当我将鼠标悬停在它们上面时,我需要它们放大.但是......当我在图像上移动时,我希望放大的图像贴在指针旁边.我不知道该怎么称呼它.我很确定它只用javascript完成,只是css在这里不起作用.

像这样的东西http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/,但你知道,它必须随着指针运动而移动.

什么是最有效的方法？

Answer 1

以前的答案可能正是您正在寻找的答案，您可能已经解决了这个问题。但我注意到你没有在你的帖子中的任何地方提到 jquery，所有这些答案都涉及到这个问题。所以对于纯JS解决方案......

我会根据问题的措辞方式假设您已经知道如何弹出图像？这可以通过在 html 中编码一个绝对定位的隐藏 img 标签来完成，或者使用 JS 动态生成。如果您是 JS 新手，前者可能更容易。在我的示例中，我假设您执行了类似于以下操作：

<img src="" id="bigImg" style="position:absolute; display:none; visibility:hidden;">

那么你的缩略图需要一个 onMouseOver 函数。这个函数必须做三件事：

1) 将实际图像文件加载到隐藏图像中

//I'll leave it up to you to get the right image in there.
document.getElementById('bigImg').src = xxxxxxxx;

2）定位隐藏图像

//See below for what to put in place of the xxxx's here.
document.getElementById('bigImg').style.top = xxxxxxxx;
document.getElementById('bigImg').style.left = xxxxxxxx;

3）使隐藏的图像出现

document.getElementById('bigImg').style.display = 'block';
document.getElementById('bigImg').style.visibility = 'visible';

然后，您需要捕获 onMouseMove 事件并相应地使用与上面 (2) 中用于定位图像的代码相同的代码更新现在未隐藏的图像的位置。这将类似于以下内容：

//Get the mouse position on IE and standards compliant browsers.
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
    var curCursorX = e.pageX;
    var curCursorY = e.pageY;
} else {
    var curCursorX = e.clientX + document.body.scrollLeft;
    var curCursorY = e.clientY + document.body.scrollTop;
}
document.getElementById('bigImg').style.top = curCursorY + 1;
document.getElementById('bigImg').style.left = curCursorX + 1;

这应该就可以了。只需添加一个 onMouseOut 事件即可再次隐藏 bigImg 图像。您可以将最后两行中的“+1”更改为您喜欢的任何内容，以相对于光标正确放置图像。

请注意，以上所有代码仅用于演示目的；我还没有测试过它，但它应该让你走上正轨。您可能希望通过预加载更大的图像来进一步扩展这个想法。您也可以通过使用 setTimeout 每 20 毫秒左右更新一次位置来放弃捕获 mousemove 事件，尽管我认为这种方法更复杂且不太理想。我提到它只是因为一些开发人员（包括我刚开始时的我）对 JS 事件处理有反感。

我使用我编写的自定义 ColdFusion 标签做了类似的事情，该标签会生成一个浮动 div，用户可以在屏幕上单击并拖动。原理一样。如果您需要我，我可以将其挖掘出来以更深入地回答任何其他问题。

祝你好运！