2

我想做像这样的信息窗格。在此站点中，当我将标签悬停时，会打开一个信息窗格。我应该知道哪个主题。你能不能给个提示。或者有什么教程？

谢谢。

4

6 回答 6

2

演示：http: //jsfiddle.net/h9ShH/

演示 2（带动画）：http: //jsfiddle.net/h9ShH/1/

HTML：

<ul class="tags">
    <li class="tag" data-notice="notice 1">tag 1</li>
    <li class="tag" data-notice="notice 2">tag 2</li>
    <li class="tag" data-notice="notice 3">tag 3</li>
</ul>​

CSS：

.notice {
  position: fixed;
}​

JavaScript：

$('.tag').hover(function (e) {
    this.notice = $('<div>')
        .addClass('notice')
        .css({
            top: $(this).offset().top + 15, 
            left: $(this).offset().left + 20
        }).text($(this).data('notice'))
        .appendTo(this);
}, function () {
    this.notice.remove();
});​
于 2012-09-10T13:30:12.813 回答
1

我以前使用过http://craigsworks.com/projects/qtip/demos/。看看它。但是有一堆插件，你也可以用 jQuery 和 mouseover 编写你自己的...

于 2012-09-10T13:17:27.123 回答
0
  • mouseover您应该向and添加一个侦听器mouseout，而不是click.
  • 当发生此类悬停时，您可能希望也可能不希望使用 AJAX 获取数据。
  • 您可能想要也可能不想要animate工具提示的某些属性。
于 2012-09-10T13:17:06.313 回答
0

据我所知，最好的插件是Qtip。它是 MIT 许可的，漂亮，具有您可能需要的所有配置。

它可以在悬停或单击时触发。而且，如果您想使用 Ajax，它也支持：http: //craigsworks.com/projects/qtip2/demos/ajax。

演示：http: //jsfiddle.net/8tvDU/

于 2012-09-10T13:18:11.527 回答
0

你应该看看JQuery UI尤其是显示动画。

您只需要有一个 div 并show( effect, [options], [speed], [callback] )使用正确的参数调用 show 函数 ( )：

function runEffect()
{
  var selectedEffect = "scale";
  var options = { percent: 100 };
  $("#effect").show(selectedEffect, options, 500, callback);
};

$( "#button" ).click(function()
  {
    runEffect();
    return false;
  }
);

<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Show</h3>
    <p>
        Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
于 2012-09-10T13:19:29.010 回答
0

试试这个链接

我最喜欢这些，因为它基于纯 CSS，不需要 Javascript 或 jQuery

于 2012-09-10T13:19:35.460 回答