对不起，如果我问这个问题似乎微不足道，但是..
我有一些图片，当我将鼠标悬停在它们上面时，我需要将它们放大。但是.. 当我在图像上移动时，我希望放大的图像贴在指针旁边。我不知道该怎么称呼它。我很确定它只用 javascript 完成，只是 css 在这里不起作用。
类似 http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ 的东西，但你知道，它必须随着指针的移动而移动。
最有效的方法是什么？
【问题讨论】：
标签： javascript html css image
^ 除了上述之外，这里还有一个工作的 JS Fiddle。访问：jsfiddle.net/hdwZ8/1/
它已经过粗略的编辑，因此它不只使用整体 IMG css 标签，现在任何人都可以轻松使用它。
我在我的 Wordpress 客户端站点中使用此脚本而不是 Lightbox，在 IMO 中使用鼠标快速放大图像要好得多。制作高效的画廊非常容易，尤其是使用 AdvancedCustomFields 插件和 WP PHP 中继器循环！
【讨论】：
Jquery 是最简单的方法。绝对位置是关键。
【讨论】：
之前的答案可能正是您正在寻找的，并且您可能已经解决了这个问题。但是我注意到您在帖子中的任何地方都没有提到 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 中的一种解决方案（我不是 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();
})
【讨论】：
【讨论】：