javascript - 悬停到网页框架时的边界图像预览

Question

我已经设法使用 this 使悬停时的图像预览有效但是当我移动鼠标时，预览会随之移动并逃离网页的边界“隐藏其中的一部分”，有没有办法像 facebook 的照片缩放插件一样将其绑定(bind)到只在网页内移动？

Answer 1

我已经使用上面 Fiddle 中的代码创建了一个新的 Fiddle，其中包含一些工作代码，这些代码使用与 Facebook 照片缩放插件似乎正在使用的逻辑类似的逻辑。当光标移动到图像的顶部时，预览图像的顶部设置为位于页面顶部，一旦将光标移动到图像上的特定点下方，预览图像就会开始向下移动页面与它。

您还需要考虑其他因素，包括如果用户在显示预览图像时将鼠标光标快速移到预览图像的顶部，则会导致预览被删除。我确信解决这个问题的方法应该不会太难弄清楚，并且可能只需要某种延迟来删除预览图像或在删除预览图像之前检查鼠标光标的当前位置。

查看此处的代码:http://jsfiddle.net/f7rJB/2/

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

jQuery 有一些关于在页面上查找鼠标位置的好文档:http://docs.jquery.com/Tutorials:Mouse_Position