将鼠标悬停在网页框架上的边框图像预览

我设法使用this在悬停工作上进行了图像预览，但是当我移动鼠标时，预览随其移动并跳过网页“隐藏其中的一部分”的边界，是有没有办法像Facebook的照片缩放插件那样将其绑定到网页中？将鼠标悬停在网页框架上的边框图像预览

2012-08-14 Mohamed El Menisy

肯定会在这里需要一些更多的信息。你有没有可以发布的代码，或者你可以为我们制作一个[jsfiddle]（http://jsfiddle.net）。只是为了澄清一下，你的意思是，当你将鼠标悬停在屏幕最右侧的图像上时，预览图像在屏幕区域之外右侧稍微打开？ – Jeemusu 2012-08-14 01:25:59

感谢您的回复，这里是一个屏幕截图，显示预览图像转义网页的上限。 http://img109.imageshack.us/img109/4420/escapingborder.jpg – 2012-08-14 01:48:00

好吧，现在我们知道问题是什么，但除非您向我们展示一些代码，否则没有人可以帮助您。 – Jeemusu 2012-08-14 01:49:16

我已经使用上面的小提琴中的代码来创建一个新的小提琴，它带有一些使用与Facebook Photo Zoom插件似乎正在使用的类似逻辑的工作代码。当光标在图像顶部移动时，预览图像的顶部被设置为位于页面的顶部，并且一旦您将光标移动到图像上某个点的下方，预览图像就开始向下移动页面用它。

还有其他一些因素需要考虑，包括如果用户在显示预览图像时将鼠标光标快速移动到预览图像的顶部，则会导致预览被删除。我敢肯定，这个解决方法不应该太难以解决，并且可能只需要在删除预览图像或在删除预览图像之前检查鼠标光标的当前位置时出现某种延迟。

看到代码在这里的行动：http://jsfiddle.net/f7rJB/2/

请注意，此代码只是为了显示离开页面边界被阻止预览图像，并显示预览用光标向下移动页面移动和不意味着一个完整的解决方案。

jQuery有上找到网页上的鼠标位置的一些好的文档：http://docs.jquery.com/Tutorials:Mouse_Position

来源

2012-08-14 06:35:55 ObstacleCoder

谢谢@ kezzman11，这看起来像一个非常整洁的解决方案。我会考虑进一步定制它，看看它是怎么回事！ – 2012-08-14 15:22:13

没问题，很高兴我能帮上忙。我希望一切顺利。 – ObstacleCoder 2012-08-16 02:23:13

将鼠标悬停在网页框架上的边框图像预览

回答

相关问题