javascript 放大图像并用鼠标指针移动它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8120530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
enlarge image and move it with the pointer on mouse over
提问by Andrei Cristian Prodan
Sorry if this might seem trivial for me to ask but..
对不起，如果这对我来说似乎微不足道，但是..
I have some images and I need them to enlarge when I hover my mouse over them. But.. I want for the enlarged image to stick next to the pointer as I move it across the image. I don't know what to call it. I'm pretty sure it's only done with javascript, just css won't work here.
我有一些图像，当我将鼠标悬停在它们上方时，我需要将它们放大。但是......我希望放大的图像在我在图像上移动时贴在指针旁边。我不知道该怎么称呼它。我很确定它只能用 javascript 完成，只是 css 在这里不起作用。
Something like this http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/, but you know, it has to move with the pointer in motion.
像这样的http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/，但你知道，它必须随着指针的移动而移动。
What's the most effective way to do this?
做到这一点最有效的方法是什么？
采纳答案by Nicholas
The previous answers may be exactly what you're looking for, and you may already have this solved. But I note that you didn't mention jquery anywhere in your post and all of those answers dealt with that. So for a pure JS solution...
以前的答案可能正是您正在寻找的答案，您可能已经解决了这个问题。但我注意到你没有在你的帖子中的任何地方提到 jquery，所有这些答案都涉及到这个问题。所以对于纯 JS 解决方案......
I'll assume from the way the question was phrased that you already know how to pop the image up? This can be done by coding an absolutely positioned hidden img tag in the html or generated on the fly with JS. The former may be easier if you are a JS novice. In my examples I'll assume you did something similar to the following:
我会根据问题的措辞方式假设您已经知道如何弹出图像？这可以通过在 html 中编码一个绝对定位的隐藏 img 标签来完成，或者使用 JS 动态生成。如果您是 JS 新手，前者可能更容易。在我的示例中，我假设您执行了类似于以下内容的操作：
<img src="" id="bigImg" style="position:absolute; display:none; visibility:hidden;">
Then you need an onMouseOver function for your thumbnail. This function must do three things:
那么你的缩略图需要一个 onMouseOver 函数。这个函数必须做三件事：
1) Load the actual image file into the hidden image
1) 将实际图像文件加载到隐藏图像中
//I'll leave it up to you to get the right image in there.
document.getElementById('bigImg').src = xxxxxxxx;
2) Position the hidden image
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) Make the hidden image appear
3）使隐藏的图像出现
document.getElementById('bigImg').style.display = 'block';
document.getElementById('bigImg').style.visibility = 'visible';
Then you'll need to capture the onMouseMove event and update the now un-hidden image's position accordingly using the same code you would have used in (2) above to position the image. This would be something like the following:
然后，您需要捕获 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;
And that should just about do it. Just add an onMouseOut event to hide the bigImg image again. You can change the "+1" in the last two lines to whatever you like to place the image correctly in relation to the cursor.
这应该就可以了。只需添加一个 onMouseOut 事件即可再次隐藏 bigImg 图像。您可以将最后两行中的“+1”更改为您喜欢的任何内容，以相对于光标正确放置图像。
Note that all of the code above was for demonstration purposes only; I haven't tested any of it, but it should get you on the right track. You may want to expand upon this idea further by preLoading the larger images. You could also forgoe capturing mousemove events by using setTimeout to update the position every 20 ms or so, though I think that approach is more complicated and less desirable. I only mention it because some developers (including me when I started) have an aversion to JS event handling.
请注意，以上所有代码仅用于演示目的；我还没有测试过任何一个，但它应该让你走上正轨。您可能希望通过预加载更大的图像来进一步扩展这个想法。您也可以通过使用 setTimeout 每 20 毫秒左右更新一次位置来放弃捕获 mousemove 事件，尽管我认为这种方法更复杂且不太理想。我提到它只是因为一些开发人员（包括我刚开始时的我）对 JS 事件处理有反感。
I did something similar to this with a custom ColdFusion tag I wrote that would generate a floating div users could click and drag around the screen. Same principle. If you need me to I can dig that out to answer any additional questions in more depth.
我用我编写的自定义 ColdFusion 标签做了类似的事情，它会生成一个浮动的 div 用户可以点击并在屏幕上拖动。原理一样。如果您需要我，我可以将其挖掘出来以更深入地回答任何其他问题。
Good luck!
祝你好运！
回答by LJAK
Liece's solution is close, but won't achieve the desired effect of the large image following the cursor.
Liece的解决方案很接近，但无法达到光标跟随大图的预期效果。
Here's a solution in jQuery:
这是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);
});
});
The HTML is:
HTML是：
<img class="small" src="fu.jpg">
<img class="large" src="bar.jpg">
CSS:
CSS：
img { position: absolute; }
回答by MBTDesigns
Jquery is the easiest route. position absolute is key.
Jquery 是最简单的方法。位置绝对是关键。
回答by Wazy
Try this links [jquery with auto positioning]
试试这个链接 [jquery with auto positioning]
1.Simple
1.简单
http://jquery.bassistance.de/tooltip/demo/
http://jquery.bassistance.de/tooltip/demo/
2.Good with forum
2.论坛好
回答by liece
if I understood you correctly you want to position your big image relatively to the cursor. One solution in jquery (i'm not 100% sure of the code here but the logic is there):
如果我理解正确，您希望将大图像相对于光标定位。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();
})
回答by Ivandude
^ In addition to the above, here is a working JS Fiddle. Visit: jsfiddle.net/hdwZ8/1/
^ 除了上述内容，这里还有一个可用的 JS Fiddle。访问：jsfiddle.net/hdwZ8/1/
It has been roughly edited so it isnt using just overall IMG css tags, easy for anyone to use with this now.
它已经过粗略编辑，因此它不只使用整体 IMG css 标签，现在任何人都可以轻松使用它。
I am using this script instead of a Lightbox in my Wordpress client site, a quick zoomed in image with mouse over is much nicer IMO. It is very easy to make efficient galleries especially with AdvancedCustomFields plug-in & in the WP PHP repeater loops!
我在我的 Wordpress 客户端站点中使用此脚本而不是灯箱，鼠标悬停在图像上的快速放大图像在 IMO 上要好得多。制作高效的画廊非常容易，尤其是使用 AdvancedCustomFields 插件和 WP PHP 中继器循环！
