放大图像和移动它与鼠标上的指针

enlarge image and move it with the pointer on mouse over

本文关键字：鼠标 指针 图像 移动 放大      更新时间：2023-09-26

很抱歉，如果这对我来说是微不足道的问题，但是…

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

类似于http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/，但是你知道，它必须随着指针的移动而移动

最有效的方法是什么?

前面的答案可能正是您正在寻找的，并且您可能已经解决了这个问题。但是我注意到你在你的文章中并没有提到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，用户可以在屏幕上单击和拖动。同样的原则。如果你需要我的话，我可以更深入地回答任何其他问题。

祝你好运!

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

试试这个链接[jquery with auto positioning]

1。简单的

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

2。

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

如果我理解正确的话，你想要定位你的大图相对于光标。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();
   })

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

^除了上面的，这里是一个工作的JS提琴。访问:jsfiddle.net/hdwZ8/1/

它已经被粗略地编辑，所以它不只是使用整体的IMG css标签，现在任何人都可以很容易地使用它。

我使用这个脚本，而不是在我的Wordpress客户端网站的灯箱，一个快速放大的图像与鼠标在IMO是更好的。这是很容易使有效的画廊，特别是与先进的customfields插件&在WP PHP重复器循环!

相关文章：