我不确定您是否希望有人为您提供包含源代码的完整教程？ :) 你应该自己做一些挖掘，因为对此的具体答案可能意味着写几页:)
你怎么能四处搜寻？
像这样的工作的工具是 Firebug （IMO）。
使用像这样的更大的任务，尝试将它分成更小的部分是有意义的
假设您在SO上搜索用户配置文件弹出窗口等小部件。
- 您需要一些HTML 才能在弹出窗口中显示：右键单击弹出窗口中的任何html元素，然后单击“检查元素”菜单项。这将带您进入firebug中的HTML选项卡。这允许您弄清楚HTML的结构
- 你需要一些CSS 来设置弹出窗口的样式：当你浏览 html结构时，你可能已经注意到它的右边是CSS应用于活动元素
- 你可能想要使用一些动画效果：为此你可以使用jquery。看看here，了解更多关于可用效果以及如何触发效果的信息。 Fading用于SO上的配置文件弹出窗口。
- 然后你可能会问自己这个问题从哪里得到那个html结构，对吗？要了解有关进行哪些服务器调用的更多信息，可以使用Firebug中的“NET”选项卡。 （当您将鼠标悬停在您的用户名上时（仅限第一次？），您应该会注意到对以下内容的调用：
http://stackoverflow.com/users/profile-link-stats?_=someLongNumberHere
在firebug中，您可以检查请求和响应。您应该注意到响应是一些HTML结构。然后将此HTML结构插入DOM。
Sooooo你现在可以把它们粘在一起了：
- 用户将鼠标悬停在他的用户名
上
- 悬停triggers服务器调用（请参阅步骤4）：使用jquery hover将处理程序附加到用户链接。 （后续悬停不会触发该服务器调用，因此需要检查是否已加载该配置文件弹出窗口）
- 当服务器调用成功返回（参见jquery get）时，返回的html为inserted进入DOM并触发fadeIn效果。
- 似乎鼠标输出用于淡出弹出
我希望这是您正在寻找的答案。我花了一段时间;）