使用JS实现简单烟花效果——圆周效果的拆解

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  #container {
     
     
    width: 80%;
    height: 600px;
    border: 1px red solid;
    position: relative;
    margin: 20px auto;
    cursor: pointer;
    background: black;
  }

  .fire {
     
     
    background: red;
    position: absolute;
    /* 设置bottom时,top获取为最大值,减去鼠标点击位置 */
    bottom: 0px;
    width: 6px;
    height: 6px;

  }

  .small-fire {
     
     
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 50%;
  }
</style>

<body>
  <div id="container">

  </div>
  <script>
    //1 获取div
    let contObj = document.getElementById('container');
    contObj.onclick = (eve) => {
     
     
      // 获取鼠标在元素身上的点击位置
      let posObj = {
     
     
        left: eve.offsetX,
        top: eve.offsetY
      }

      new Fire(contObj, posObj)
    }
    function Fire(contObj, posObj) {
     
     
      // 将局部变量转化为属性
      this.contObj = contObj;
      this.posObj = posObj;

      //  创建大烟花的div
      let bigFire = document.createElement('div');
      bigFire.className = 'fire';
      // 随机颜色
      bigFire.style.background = this.getColor();
      // 设置left值
      bigFire.style.left = this.posObj.left + 'px';
      // 追加到页面中
      this.contObj.appendChild(bigFire)

      //console.log(bigFire);
      // let that = this;
      // 实现大烟花的运动
      this.move(bigFire, {
     
      top: this.posObj.top }, function () {
     
     
        bigFire.remove();
        // console.log(this);
        this.smallFire();
      }.bind(this))

    }
    // 小烟花的生成
    Fire.prototype.smallFire = function () {
     
     
      // 产生20个小烟花
      for (let i = 0; i < 20; i++) {
     
     
        // 创建div
        let smallDiv = document.createElement('div');
        // 追加类
        smallDiv.className = 'small-fire'
        // 随机背景颜色
        smallDiv.style.background = this.getColor();
        // 设置起始位置,鼠标点击的位置
        smallDiv.style.left = this.posObj.left + 'px';
        smallDiv.style.top = this.posObj.top + 'px'
        // 随机终点
        let endTop = this.random(0, this.contObj.offsetHeight - smallDiv.offsetHeight)
        let endLeft = this.random(0, this.contObj.offsetWidth - smallDiv.offsetWidth);
        // 追加页面
        this.contObj.appendChild(smallDiv);
        let that = this;

        that.move(smallDiv, {
     
      left: endLeft, top: endTop }, function () {
     
     
          console.log(6666);
          smallDiv.remove();
        })

      }
    }
    // var times = '';
    /*********运动函数**********/
    Fire.prototype.move = function (ele, targetObj, cb) {
     
     
      // 设置清空定时器的开关
      let onOff = false;
      //clearInterval(times);
      var times = setInterval(() => {
     
     
        // 遍历运动的方向和目标
        for (let attr in targetObj) {
     
     
          // 获取元素实时的位置,计算speed
          let tmpPos = parseInt(this.getPos(ele, attr));
          //  console.log(tmpPos);
          let speed = (targetObj[attr] - tmpPos) / 10;
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
          // 到达目标值,设置开关状态
          if (tmpPos + speed == targetObj[attr]) {
     
     
            onOff = true;
          }
          // 设置元素运动
          ele.style[attr] = tmpPos + speed + 'px';

        }

        // 判断开关状态
        if (onOff) {
     
     
          clearInterval(times);
          // 回调函数存在且调用
          cb && cb();
        }
      }, 30)
    }
    // 获取实时位置
    Fire.prototype.getPos = function (obj, attr) {
     
     
      if (obj.currentStyle) {
     
        // 获取css的样式
        return obj.currentStyle[attr];
      } else {
     
     
        return getComputedStyle(obj)[attr]
      }
    }

    /******随机数和随机颜色******/
    Fire.prototype.random = function (min, max) {
     
     
      return Math.round(Math.random() * (max - min) + min);
    }

    Fire.prototype.getColor = function () {
     
     
      let c = '#';
      for (var i = 0; i < 6; i++) {
     
     
        c += this.random(0, 16).toString(16)
      }

      return c;
    }
  </script>
</body>
</html>

如果设置圆周运动改变小烟花的left top的目标值

        // 设置起始位置,鼠标点击的位置
        smallDiv.style.left = this.posObj.left + 'px';
        smallDiv.style.top = this.posObj.top + 'px'
        // 随机终点
        var endTop = parseInt(Math.sin(Math.PI / 180 * 360 / fireNum * i) * r) + this.posObj.top;
        var endLeft = parseInt(Math.cos(Math.PI / 180 * 360 / fireNum * i) * r) + this.posObj.left

使用JS实现简单烟花效果——圆周效果 的拆解

如果设置圆周运动改变小烟花的left top的 目标值

猜你喜欢

使用JS实现简单烟花效果——圆周效果的拆解

如果设置圆周运动改变小烟花的left top的目标值