Question

我们试图模仿像IBM这样的东西 - 请参阅图像框（让我们构建一个更智能的行星盒），当它移动时，会显示一个带链接的图层。

非常感谢任何帮助/参考。

谢谢！ ķ

Answer 1

你需要的是一个javascript工具提示插件。试试google“jquery tooltip plugin”。

一个好的插件是flowplayer tooltip plugin（howto，download）。您可以在工具提示框中执行自定义html。

Answer 2

这是非常常见的效果。他们有一个滚动窗格，后面是隐藏的，绝对定位的容器.ibm-expand-overlay。它们都被包裹在相对定位的div中。效果在mouseenter窗格子项上触发，在其.ibm-columns

中

$('.ibm-columns').mouseenter( function() {

  //some positioning logic is needed here
  //probably $('.ibm-expand-overlay').css('left', $(this).index() * childWidth ) is sufficient enought

  $('.ibm-expand-overlay').fadeIn();
} );

$('.ibm-expand-overlay').mouseleave( function() { $(this).fadeOut(); } ); //to hide on mouseleave

在悬停时使用图像上的链接显示图层/ div

2 个答案: