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

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 标签做了类似的事情，它会生成一个 float 的 div，用户可以点击并在屏幕上拖动。同理。如果您需要我，我可以挖掘出来更深入地回答任何其他问题。

祝你好运!