jquery编写弹出信息提示条并延时滑出动画实现示例
作者:TANKING
这篇文章主要为大家介绍了jquery编写弹出信息提示条并延时滑出动画实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
摘要
平时编写一些简单的网站,又不想添加任何的组建和外部库,但是需要一些弹窗或者弹出信息提示条,可以自己编写一个简单的小组件。
简单的小组件
<!DOCTYPE html> <html> <head> <title>提示条示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> *{ padding: 0; margin: 0; } body{ background: #eee; } button{ padding: 6px 20px; } #app{ width: 300px; margin:20px auto; } .notification-container { position: fixed; top: 0; right: 0; width: 100%; height: 100%; pointer-events: none; } .notification { background: #fff; color: #333; width: 250px; height: 70px; line-height: 70px; text-indent: 15px; border-radius: 10px; display: block; pointer-events: auto; margin-bottom: 10px; } </style> </head> <body> <div id="app"> <!-- 创建按钮 --> <button onclick="createNotification()">创建</button> <!-- 提示条容器 --> <div id="notification-container"></div> </div> <script> // 计数 let notificationCount = 0; // 创建提示条 function createNotification() { // 增加提示条 notificationCount++; const notificationId = `notification-${notificationCount}`; const notification = $( `<div class="notification" id="${notificationId}">提示条 ${notificationCount}</div>` ); // 添加 $("#notification-container").append(notification); // 延时隐藏+动画 setTimeout(function() { $(`#${notificationId}`).slideUp(500, function() { $(this).remove(); }); }, 2000); } </script> </body> </html>
演示
以上就是jquery编写弹出信息提示条并延时滑出动画实现示例的详细内容,更多关于jquery弹出提示条延时滑出动画的资料请关注脚本之家其它相关文章!