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 ms左右更新位置来放弃捕获mousemove事件，尽管我认为这种方法更复杂且不太理想。我只提到它，因为一些开发人员（包括我在我开始时）对JS事件处理感到厌恶。

我使用我编写的自定义ColdFusion标签做了类似的事情，它会生成浮动div，用户可以在屏幕上单击并拖动。同样的原则。如果你需要我，我可以深入研究，以便更深入地回答任何其他问题。

祝你好运！

Answer 2

Liece的解决方案已接近，但无法达到光标后的大图像所需的效果。

以下是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">

CSS：

img { position: absolute; }

Answer 3

试试此链接[jquery with auto positioning]

<强> 1.Simple

http://jquery.bassistance.de/tooltip/demo/

2.Good with forum

http://flowplayer.org/tools/tooltip/index.html

Answer 4

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

$('.thumb').hover(function(e){
    var relativeX = e.pageX - 100;
    var relativeY = e.pageY - 100;

    $(.image).css("top", relativeY);
    $(.image).css("left", relativeX);
    $(.image).show();
}, function(){
    $(.image).hide();
   })

Answer 5

Jquery是最简单的路线。绝对位置是关键。

Answer 6

^除了上述内容，这里还有一个工作的JS Fiddle。访问：jsfiddle.net/hdwZ8/1/

它已被粗略编辑，因此它不仅仅使用整体IMG css标签，现在很容易让任何人使用它。

我在我的Wordpress客户端网站中使用此脚本而不是Lightbox，使用鼠标滑动的快速放大图像是更好的IMO。使用AdvancedCustomFields插件和电子插件制作高效的画廊非常容易。在WP PHP转发器循环中！

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

6 个答案: