JQuery动态背景案例

代码的实现

  • 创建50个盛放背景元素的Div盒子
 for (let i = 0; i < 50; i++) {
      var box = document.createElement("div");
      box.className = "case";
      console.log();
      $(".main").append(box); 
    }
 $("<div class=item ></div>").appendTo($(".case"));
 
  • JS控制随机样式
    $(".item").each(function (index, value) {
      var size = Math.random() * 50 + 10;
      var topRandom = Math.random() * $(".main").height();
      var leftRandom = Math.random() * $(".main").width();
      $(value).css({
        top: topRandom + "px",
        left: leftRandom + "px",
        width: size + "px",
        height: size + "px",
        backgroundColor: `hsla(${Math.random() * 360},50% ,70% ,${Math.random() + 0.2})`,
      });
    });
  • case盒子控制下落动画
    @keyframes caseMove {
      0% {
        transform: translateY(-100px);
      }
      100% {
        transform: translateY(700px);
      }
    }
  • item盒子左右移动动画
    @keyframes itemMove {
      0% {}

      50% {
        transform: translateX(-50px);
      }

      100% {}
    }
  • JS控制case盒子和item元素的移动
 var index = 0;
    var timer = setInterval(function () {
      // index = Math.floor(Math.random() * $(".item").length);
      $(".case").eq(index).css({
        animation: "caseMove 9s linear infinite",
      })
      $(".item").eq(index).css({
        animation: "itemMove 5s linear infinite",
      })
      index++;
      console.log(index);
    }, 50)
  • 当所有小球动起来后终止定时函数
    if (index >= $(".case").length) {
      clearInterval(timer);
      timer = null;
    }

效果图

在这里插入图片描述

展开阅读全文
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2020 CSDN 皮肤主题: 1024 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值