花里胡哨的響應式橢圓運動特效

無聊用原生JS寫的一個多小球橢圓運動特效
1.改變窗口會自動改變橢圓形狀和小球大小
2.隨機改變小球顏色
3.可以隨意設置小球個數(shù)妹窖，運動速度等

效果圖：

響應式橢圓運動特效

源代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>響應式橢圓運動特效</title>
  <style>
  </style>
</head>

<body>
  <script>
    var dotArr = [];
    // num設置小圓的個數(shù)
    var num = 15;
    init()
    function init() {
      for (var i = 0; i < num; i++) {
        var dot = ce("div", {
          borderRadius: "50%",
          background: "#" + Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, "0"),
          position: "absolute",
          zIndex: "999",
        })
        dot.radian = 0 + 360 / num * i;
        dotArr.push(dot)
        dotArr.scale = 50 / document.documentElement.clientWidth
        dotArr.changeColorTime = 10;
        document.body.appendChild(dot)
      }
      circlingMotion(dotArr, { x: document.documentElement.clientWidth / 2, y: document.documentElement.clientHeight / 2 }, document.documentElement.clientWidth / 4, document.documentElement.clientHeight / 4);
      window.addEventListener("resize", resizeHandler)
    }
    // 窗口改變處理函數(shù)
    function resizeHandler() {
      clearInterval(dotArr.timer);
      for (var i = 0; i < num; i++) {
        dotArr[i].style.width = dotArr.scale * document.documentElement.clientWidth
      }
      circlingMotion(dotArr, { x: document.documentElement.clientWidth / 2, y: document.documentElement.clientHeight / 2 }, document.documentElement.clientWidth / 4, document.documentElement.clientHeight / 4);
    }
    // 橢圓運動函數(shù)
    function circlingMotion(domList, centrePoint, a, b) {
      // 圓的軌跡
      // var circle = ce("div", {
      //   borderRadius: "50%",
      //   width: a * 2 - 2 + "px",
      //   height: b * 2 - 2 + "px",
      //   border: "1px dashed #ccc",
      //   position: "absolute",
      //   left: centrePoint.x - a + "px",
      //   top: centrePoint.y - b + "px"
      // })
      // document.body.appendChild(circle)
      // 設置定時器
      domList.timer = setInterval(() => {
        for (var i = 0; i < num; i++) {
          domList[i].style.left = centrePoint.x + a * Math.cos(domList[i].radian / 180 * Math.PI) - domList[i].offsetWidth / 2 + "px";
          domList[i].style.top = centrePoint.y - b * Math.sin(domList[i].radian / 180 * Math.PI) - domList[i].offsetWidth / 2 + "px";
          domList[i].style.width = domList[i].style.height = domList[i].offsetLeft / 10 + 5 + "px";
          domList[i].style.opacity = domList[i].offsetLeft / document.documentElement.clientWidth;
          domList[i].radian += 2
          // 閃瞎狗眼
          dotArr.changeColorTime--;
          if (dotArr.changeColorTime < 0) {
            domList[i].style.background = "#" + Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, "0");
            dotArr.changeColorTime = 10
          }
        }
      }, 1000 / 60);
    }
    function ce(type, style) {
      var elem = document.createElement(type)
      Object.assign(elem.style, style)
      return elem;
    }
  </script>
</body>

</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者