Question

我想像SO一样做信息窗格。在我悬停标签的网站中，会打开一个信息窗格。我应该知道哪个主题。你能给出一个暗示吗？还是任何教程？

感谢。

Answer 1

演示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();
});

Answer 2

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

Answer 3

您应该向mouseover和mouseout添加听众，而不是click。
当发生此类悬停时，您可能想要或不想使用AJAX获取数据。
您可能会或可能不想animate工具提示的某些属性。

Answer 4

据我所知，最好的插件是Qtip。这是麻省理工学院许可证，美观，具有您可能需要的所有配置。

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

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

Answer 5

你应该环顾JQuery UI，尤其是show animation。

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

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>

Answer 6

<强> try this link

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

Jquery onClick显示信息？

6 个答案: