Javascript 放大图像并将鼠标指针移到上方

很抱歉，如果这对我来说似乎微不足道，但是

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

类似这样的东西，但你知道，它必须随着指针的移动而移动

---

最有效的方法是什么？

试试这个链接

[jquery with auto positioning]

1.简单

2.与论坛的关系良好

---

如果我理解正确，您希望相对于光标定位您的大图像。jquery中的一个解决方案（我不是100%确定这里的代码，但逻辑在那里）：

---

列支敦士登的解决方案很接近，但无法达到光标后面的大图像的预期效果

以下是jQuery中的一个解决方案：

  $(document).ready(function() {
    $("img.small").hover (function () {
      $("img.large").show();
    }, function () {
      $("img.large").hide();
    });

    $("img.small").mousemove(function(e) {
      $("img.large").css("top",e.pageY + 5);
      $("img.large").css("left",e.pageX + 5);
    });
  });

HTML是：

<img class="small" src="fu.jpg">
<img class="large" src="bar.jpg">

---

前面的答案可能正是你想要的，你可能已经解决了这个问题。但我注意到你在帖子中没有提到jquery，所有这些答案都涉及到了这一点。所以对于纯JS解决方案

从问题的措辞来看，我假设你已经知道如何弹出图像了？这可以通过在html中编码一个绝对定位的隐藏img标记或使用JS动态生成来实现。如果您是JS新手，前者可能更容易。在我的示例中，我假设您做了与以下类似的事情：

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

//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;

2） 定位隐藏的图像

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

//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）中用于定位图像的相同代码相应地更新现在未隐藏的图像的位置。这将类似于以下内容：

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

//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”更改为您想要相对于光标正确放置图像的任何位置

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

我编写了一个定制的ColdFusion标记，生成了一个浮动div，用户可以在屏幕上点击和拖动。同样的原则。如果你需要我，我可以把它挖出来，更深入地回答任何其他问题

---

祝你好运

Jquery是最简单的方法。绝对位置是关键。

^除了上面提到的，这里还有一把JS小提琴。访问：jsfiddle.net/hdwZ8/1/

它已经被粗略地编辑过，所以它不只是使用整个IMG css标签，现在任何人都可以轻松地使用它

在我的Wordpress客户端站点中，我使用这个脚本而不是一个Lightbox，在我看来，用鼠标快速放大图像要好得多。制作高效的图库非常容易，特别是使用AdvancedCustomFields插件&在WP PHP repeater循环中