jQuery文字气泡效果-jquery案例-前端日记簿

首页 jquery案例正文

jQuery文字气泡效果

2023-12-05 89

效果图：

在案例中会不断的在文字中产生气泡并且向上进行移动然后进行消失的一个动画

html：

当载入页面的时候声明俩个数组通过for循环对demo的宽度进行遍历并且将每次遍历的结果添加到arr空数组当中

紧接着创建一个randomValue函数接收数组在内部对这个参数的长度通过random方法产生一个随机数并且 return出去

最后创建一个定时器通过randomValue产生一个随机的尺寸在bubbles中插入一个新建标签并将提前设置好的 class样式写入当运动完成之后进行demo删除 350ms执行一次

    setInterval(function () {
      var size = randomValue(sArr);
      $(".bubbles").append('<div class="cur" style="left: ' + randomValue(arr) + "px; width: " + size + "px; height:" + size + 'px;"></div>');
      $(".cur").animate(
        {
          bottom: "100%",
          opacity: "0.7",
        },
        3000,
        function () {
          $(this).remove();
        },
      );
    }, 350);

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery文字气泡效果</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 100vh;
        width: 100%;
        background: #3498db;
      }

      .bubbles {
        display: inline-block;
        font-family: arial;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .bubbles h1 {
        position: relative;
        margin: 1em 0 0;
        font-family: "Luckiest Guy", cursive;
        color: #fff;
        z-index: 2;
      }
      .cur {
        position: absolute;
        border-radius: 100%;
        bottom: 10px;
        background-color: #fff;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="bubbles">
      <h1>Bubbling Header</h1>
    </div>
  </body>
</html>
<script src="./js/jquery.js"></script>
<script>
  $(document).ready(function () {
    var arr = [];
    var sArr = [4, 6, 8, 10];
    // 通过对demo bubbles的宽度进行遍历 向arr数组进行内容添加
    for (let i = 0; i < $(".bubbles").width(); i++) {
      arr.push(i);
    }
    // 接收arr数组 随机返回一个数值
    function randomValue(arr) {
      return arr[Math.floor(Math.random() * arr.length)];
    }
    setInterval(function () {
      var size = randomValue(sArr);
      $(".bubbles").append('<div class="cur" style="left: ' + randomValue(arr) + "px; width: " + size + "px; height:" + size + 'px;"></div>');
      $(".cur").animate(
        {
          bottom: "100%",
          opacity: "0.7",
        },
        3000,
        function () {
          $(this).remove();
        },
      );
    }, 350);
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=241

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。