Vue.js实现动态标签云效果-优快云博客

最近项目甲方有需求说让一些标签排版好看一点，于是甲方给我直接发来了这个网址：https://blog.youkuaiyun.com/weixin_40629244/article/details/97621102，说想要这样的，好家伙，代码都全了，那还说什么，直接copy到项目上来；项目用的是vue，所以小改成了vue代码，基本没什么变动，觉得这样式还挺好看的，所以记录一下，方便以后复制使用。

<template>
  <div @mouseover="active=true" @mouseout="active=false" @mousemove="mousemove">
    <div id="div1">
      <a>JS课程</a>
      <a class="red">教程</a>
      <a>试听</a>
      <a>精品</a>
      <a class="blue">视频</a>
      <a>SEO</a>
      <a class="red">特效</a>
      <a class="yellow">JavaScript</a>
      <a>Baidu</a>
      <a class="red">CSS</a>
      <a>求职</a>
      <a class="blue">书籍</a>
      <a>继承</a>
      <a class="red">课程</a>
      <a class="blue">OOP</a>
      <a>XHTML</a>
      <a class="blue">setInterval</a>
      <a>W3C</a>
      <a>阿里</a>
      <a class="yellow">代码</a>
      <a>华为</a>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      radius: 180,
      dtr: Math.PI / 180,
      d: 300,
      mcList: [],
      active: false,
      lasta: 10,
      lastb: 10,
      distr: true,
      tspeed: 10,
      size: 100,
      mouseX: 0,
      mouseY: 0,
      howElliptical: 2,
      aA: null,
      oDiv: null,
      radiusObj: {
        sa: "",
        ca: "",
        sb: "",
        cd: "",
        sc: "",
        cc: ""
      },
      mouseX: "",
      mouseY: ""
    };
  },
  mounted() {
    this.ballText();
  },
  methods: {
    ballText() {
      this.oDiv = document.getElementById("div1");
      this.aA = this.oDiv.getElementsByTagName("a");
      for (let i = 0; i < this.aA.length; i++) {
        let oTag = {};

        oTag.offsetWidth = this.aA[i].offsetWidth;
        oTag.offsetHeight = this.aA[i].offsetHeight;

        this.mcList.push(oTag);
      }

      this.sineCosine(0, 0, 0);

      this.positionAll();

      setInterval(() => {
        this.update();
      }, 30);
    },
    mousemove(ev) {
      var oEvent = window.event || ev;

      this.mouseX =
        oEvent.clientX - (this.oDiv.offsetLeft + this.oDiv.offsetWidth / 2);
      this.mouseY =
        oEvent.clientY - (this.oDiv.offsetTop + this.oDiv.offsetHeight / 2);

      this.mouseX /= 5;
      this.mouseY /= 5;
    },
    sineCosine(a, b, c) {
      this.radiusObj.sa = Math.sin(a * this.dtr);
      this.radiusObj.ca = Math.cos(a * this.dtr);
      this.radiusObj.sb = Math.sin(b * this.dtr);
      this.radiusObj.cb = Math.cos(b * this.dtr);
      this.radiusObj.sc = Math.sin(c * this.dtr);
      this.radiusObj.cc = Math.cos(c * this.dtr);
    },
    doPosition() {
      var l = this.oDiv.offsetWidth / 2;
      var t = this.oDiv.offsetHeight / 2;
      for (let i = 0; i < this.mcList.length; i++) {
        this.aA[i].style.left =
          this.mcList[i].cx + l - this.mcList[i].offsetWidth / 2 + "px";
        this.aA[i].style.top =
          this.mcList[i].cy + t - this.mcList[i].offsetHeight / 2 + "px";

        this.aA[i].style.fontSize =
          Math.ceil((12 * this.mcList[i].scale) / 2) + 8 + "px";

        this.aA[i].style.filter =
          "alpha(opacity=" + 100 * this.mcList[i].alpha + ")";
        this.aA[i].style.opacity = this.mcList[i].alpha;
      }
    },
    positionAll() {
      let phi = 0;
      let theta = 0;
      let max = this.mcList.length;

      let aTmp = [];
      let oFragment = document.createDocumentFragment();

      for (let i = 0; i < this.aA.length; i++) {
        aTmp.push(this.aA[i]);
      }

      aTmp.sort(function() {
        return Math.random() < 0.5 ? 1 : -1;
      });

      for (let i = 0; i < aTmp.length; i++) {
        oFragment.appendChild(aTmp[i]);
      }

      this.oDiv.appendChild(oFragment);

      for (let i = 1; i < max + 1; i++) {
        if (this.distr) {
          phi = Math.acos(-1 + (2 * i - 1) / max);
          theta = Math.sqrt(max * Math.PI) * phi;
        } else {
          phi = Math.random() * Math.PI;
          theta = Math.random() * (2 * Math.PI);
        }

        this.mcList[i - 1].cx = this.radius * Math.cos(theta) * Math.sin(phi);
        this.mcList[i - 1].cy = this.radius * Math.sin(theta) * Math.sin(phi);
        this.mcList[i - 1].cz = this.radius * Math.cos(phi);

        this.aA[i - 1].style.left =
          this.mcList[i - 1].cx +
          this.oDiv.offsetWidth / 2 -
          this.mcList[i - 1].offsetWidth / 2 +
          "px";
        this.aA[i - 1].style.top =
          this.mcList[i - 1].cy +
          this.oDiv.offsetHeight / 2 -
          this.mcList[i - 1].offsetHeight / 2 +
          "px";
      }
    },
    depthSort() {
      let aTmp = [];

      for (let i = 0; i < this.aA.length; i++) {
        aTmp.push(this.aA[i]);
      }

      aTmp.sort(function(vItem1, vItem2) {
        if (vItem1.cz > vItem2.cz) {
          return -1;
        } else if (vItem1.cz < vItem2.cz) {
          return 1;
        } else {
          return 0;
        }
      });

      for (let i = 0; i < aTmp.length; i++) {
        aTmp[i].style.zIndex = i;
      }
    },
    update() {
      var a;
      var b;

      if (this.active) {
        a =
          (-Math.min(Math.max(-this.mouseY, -this.size), this.size) /
            this.radius) *
          this.tspeed;
        b =
          (Math.min(Math.max(-this.mouseX, -this.size), this.size) /
            this.radius) *
          this.tspeed;
      } else {
        a = this.lasta * 0.98;
        b = this.lastb * 0.98;
      }

      this.lasta = a;
      this.lastb = b;

      if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
        return;
      }

      var c = 0;
      this.sineCosine(a, b, c);
      for (var j = 0; j < this.mcList.length; j++) {
        var rx1 = this.mcList[j].cx;
        var ry1 =
          this.mcList[j].cy * this.radiusObj.ca +
          this.mcList[j].cz * -this.radiusObj.sa;
        var rz1 =
          this.mcList[j].cy * this.radiusObj.sa +
          this.mcList[j].cz * this.radiusObj.ca;

        var rx2 = rx1 * this.radiusObj.cb + rz1 * this.radiusObj.sb;
        var ry2 = ry1;
        var rz2 = rx1 * -this.radiusObj.sb + rz1 * this.radiusObj.cb;

        var rx3 = rx2 * this.radiusObj.cc + ry2 * -this.radiusObj.sc;
        var ry3 = rx2 * this.radiusObj.sc + ry2 * this.radiusObj.cc;
        var rz3 = rz2;

        this.mcList[j].cx = rx3;
        this.mcList[j].cy = ry3;
        this.mcList[j].cz = rz3;
        let per = this.d / (this.d + rz3);

        this.mcList[j].x =
          this.howElliptical * rx3 * per - this.howElliptical * 2;
        this.mcList[j].y = ry3 * per;
        this.mcList[j].scale = per;
        this.mcList[j].alpha = per;

        this.mcList[j].alpha = (this.mcList[j].alpha - 0.6) * (10 / 6);
      }

      this.doPosition();
      this.depthSort();
    }
  }
};
</script>
<style lang="scss" scope>
body {
  background-color: rgb(61, 224, 224);
}
#div1 {
  position: relative;
  width: 450px;
  height: 450px;
  margin: 20px auto 0;
  a {
    position: absolute;
    top: 0px;
    left: 0px;
    font-family: Microsoft YaHei;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 3px 6px;
  }
  a:hover {
    border: 1px solid #eee;
    background: #000;
  }
  .red {
    color: red;
  }
  .yellow {
    color: yellow;
  }
  .blue {
    color: blue;
  }
}
</style>