欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery編寫彈出信息提示條并延時(shí)滑出動(dòng)畫實(shí)現(xiàn)示例

 更新時(shí)間：2023年08月06日 11:18:46   作者：TANKING  
這篇文章主要為大家介紹了jquery編寫彈出信息提示條并延時(shí)滑出動(dòng)畫實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

摘要

平時(shí)編寫一些簡(jiǎn)單的網(wǎng)站，又不想添加任何的組建和外部庫，但是需要一些彈窗或者彈出信息提示條，可以自己編寫一個(gè)簡(jiǎn)單的小組件。

簡(jiǎn)單的小組件

<!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">
    <!-- 創(chuàng)建按鈕 -->
    <button onclick="createNotification()">創(chuàng)建</button>
    <!-- 提示條容器 -->
    <div id="notification-container"></div>
  </div>
  <script>
    // 計(jì)數(shù)
    let notificationCount = 0;
    // 創(chuàng)建提示條
    function createNotification() {
      // 增加提示條
      notificationCount++;
      const notificationId = `notification-${notificationCount}`;
      const notification = $(
        `<div class="notification" id="${notificationId}">提示條 ${notificationCount}</div>`
      );
      // 添加
      $("#notification-container").append(notification);
      // 延時(shí)隱藏+動(dòng)畫
      setTimeout(function() {
        $(`#${notificationId}`).slideUp(500, function() {
          $(this).remove();
        });
      }, 2000);
    }
  </script>
</body>
</html>

演示

以上就是jquery編寫彈出信息提示條并延時(shí)滑出動(dòng)畫實(shí)現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于jquery彈出提示條延時(shí)滑出動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論