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

时间:2012-08-14 01:21:23

标签: javascript jquery html css web

我已经设法使用this在悬停工作中进行图像预览,但是当我移动鼠标时,预览随之移动并逃脱网页的边界“隐藏其中一些”,有没有办法限制它只在facebook的照片缩放插件中移动?

1 个答案:

答案 0 :(得分:0)

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

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

请参阅此处的代码:http://jsfiddle.net/f7rJB/2/

请注意,此代码仅用于显示阻止预览图像离开页面边界,并显示预览在光标移动的情况下向下移动,并不是一个完整的解决方案。

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