帽子提示是一个简单的jQuery插件，用于创建一个始终位于网页底部的动画通知栏

该插件目前支持四种通知类型：信息、危险、成功和默认，使向受众显示重要消息、警报或限时优惠变得简单。

参见：

• JavaScript中的10个最佳通知栏库

如何使用它:

1.下载并导入jQuery帽子提示插件。

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery Hat Tip -->
<link rel="stylesheet" href="/path/to/hat-tip.min.css" />
<script src="/path/to/hat-tip.min.js"></script>

<!-- OR -->
<script src="/path/to/hat-tip-bundle.js"></script>

2.将以下HTML片段添加到网页底部。

<!--<div id="hattip" role="alert">
  <span id="msg"></span>
  <button type="button" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>-->

3.在底部通知栏中显示默认消息。

hattip_fire('This is a default message');

4.该插件还支持HTML内容。

hattip_fire('This is an <b>HTML</b> message');

5.的第二个参数帽状火焰方法用于指定通知类型。

hattip_fire('This is a <b>DANGER</b> message', 'ht-danger');
hattip_fire('This is a <b>SUCCESS</b> message', 'ht-success');
hattip_fire('This is an <b>INFO</b> message', 'ht-info');
hattip_fire('This is a <b>CUSTOM</b> message', 'custom-class');

6.在通知栏中添加动画中的反弹。

hattip_fire('With <b>louder animation</b> animation', 'ht-danger', 'dont-panic');

预览截图

动画贴纸底部通知栏插件 jQuery帽子提示