以下是使用一些常见的 jQuery 插件实现 Growl 效果的简单示例：
1. jQuery Toast Plugin:
[jQuery Toast Plugin](https://github.com/kamranahmedse/jquery-toast-plugin) 是一个轻量级的插件，用于显示通知消息。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script>
<script>
$.toast({
text: 'Hello, this is a toast message',
position: 'top-right',
loaderBg: '#ff6849',
icon: 'info'
});
</script>
2. Bootstrap Notify:
[Bootstrap Notify](https://bootstrap-notify.remabledesigns.com/) 是一个基于 Bootstrap 的通知插件。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mouse0270-bootstrap-notify/3.1.7/bootstrap-notify.min.js"></script>
<script>
$.notify({
message: 'Hello, this is a Bootstrap Notify message'
},{
type: 'info',
placement: {
from: "top",
align: "right"
},
delay: 1000
});
</script>
请注意，上述示例中引用的插件可能有更新版本，请根据需要选择合适的版本。您可以根据自己的项目需求选择适当的插件，并按照文档进行配置和使用。
转载请注明出处：http://www.zyzy.cn/article/detail/12908/jQuery