【前端特效】程序员给你的专属告白，快来转发给你心爱的那个她吧！

点击打开视频讲解更加详细

 <template>

  <div class="content">

    <img src="../assets/live.gif" alt="" />

    <section class="cloud-bed">

      <div class="cloud-box">

        <span

          v-for="(item, index) in dataList"

          :key="index"

          @click="getDataInfo(item)"

          :style="{ color: item.color, background: item.bgColor }"

        >

          {{ item.name }}

        </span>

      </div>

    </section>

  </div>

</template>

 

<script>

export default {

  name: "word-cloud",

  data() {

    return {

      timer: 50, // 球体转动速率

      radius: 0, // 词云球体面积大小

      dtr: Math.PI / 180, //鼠标滑过球体转动速度

      active: false, // 默认加载是否开启转动

      lasta: 0, // 上下转动

      lastb: 0.5, // 左右转动

      distr: true,

      tspeed: 0, // 鼠标移动上去时球体转动

      mouseX: 0,

      mouseY: 0,

      tagAttrList: [],

      tagContent: null,

      cloudContent: null,

      sinA: "",

      cosA: "",

      sinB: "",

      cosB: "",

      sinC: "",

      cosC: "",

      dataList: [

        {

          name: "金晨",

          value: "1",

          bgColor: "rgb(57, 193, 207,0.12)",

          color: "#39c1cf",

        },

        {

          name: "昆凌",

          value: "8",

          bgColor: "rgb(66, 105, 245,0.12)",

          color: "#4269f5",

        },

        {

          name: "刘亦菲",

          value: "9",

          bgColor: "rgb(184, 107, 215,0.12)",

          color: "#b86bd7",

        },

        {

          name: "林志玲",

          value: "3",

          bgColor: "rgb(243, 84, 83,0.12)",

          color: "#f35453",

        },

        {

          name: "林心如",

          value: "6",

          bgColor: "rgb(250, 116, 20,0.12)",

          color: "#FA7414",

        },

        {

          name: "李沁",

          value: "10",

          bgColor: "rgb(255, 171, 30,0.12)",

          color: "#FFAB1E",

        },

        {

          name: "林依晨",

          value: "2",

          bgColor: "rgb(136, 104, 217,0.12)",

          color: "#8868D9",

        },

        {

          name: "李宇春",

          value: "5",

          bgColor: "rgb(42, 184, 230,0.12)",

          color: "#2AB8E6",

        },

        {

          name: "贾静雯",

          value: "7",

          bgColor: "rgb(117, 133, 162,0.12)",

          color: "#7585A2",

        },

      ],

    };

  },

  mounted() {

    this.$nextTick(() => {

      this.radius = document.querySelector(".cloud-box").offsetWidth / 3;

      this.initWordCloud();

    });

  },

  beforeDestroy() {

    clearInterval(this.timer);

  },

  methods: {

    // 获取点击文本信息

    getDataInfo(item) {

      console.log(item, "item");

    },

    initWordCloud() {

      this.cloudContent = document.querySelector(".cloud-box");

      this.tagContent = this.cloudContent.getElementsByTagName("span");

      for (let i = 0; i < this.tagContent.length; i++) {

        let tagObj = {};

        tagObj.offsetWidth = this.tagContent[i].offsetWidth;

        tagObj.offsetHeight = this.tagContent[i].offsetHeight;

        this.tagAttrList.push(tagObj);

      }

      this.sineCosine(0, 0, 0);

      this.positionAll();

      this.cloudContent.onmouseover = () => {

        this.active = true;

      };

      this.cloudContent.onmouseout = () => {

        this.active = false;

      };

      this.cloudContent.onmousemove = (ev) => {

        let oEvent = window.event || ev;

        this.mouseX =

          oEvent.clientX -

          (this.cloudContent.offsetLeft + this.cloudContent.offsetWidth / 2);

        this.mouseY =

          oEvent.clientY -

          (this.cloudContent.offsetTop + this.cloudContent.offsetHeight / 2);

        this.mouseX /= 5;

        this.mouseY /= 5;

      };

      setInterval(this.update, this.timer);

    },

    positionAll() {

      let phi = 0;

      let theta = 0;

      let max = this.tagAttrList.length;

      let aTmp = [];

      let oFragment = document.createDocumentFragment();

      //随机排序

      for (let i = 0; i < this.tagContent.length; i++) {

        aTmp.push(this.tagContent[i]);

      }

      aTmp.sort(() => {

        return Math.random() < 0.5 ? 1 : -1;

      });

      for (let i = 0; i < aTmp.length; i++) {

        oFragment.appendChild(aTmp[i]);

      }

      this.cloudContent.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.tagAttrList[i - 1].cx =

          this.radius * Math.cos(theta) * Math.sin(phi);

        this.tagAttrList[i - 1].cy =

          this.radius * Math.sin(theta) * Math.sin(phi);

        this.tagAttrList[i - 1].cz = this.radius * Math.cos(phi);

        this.tagContent[i - 1].style.left =

          this.tagAttrList[i - 1].cx +

          this.cloudContent.offsetWidth / 2 -

          this.tagAttrList[i - 1].offsetWidth / 2 +

          "px";

        this.tagContent[i - 1].style.top =

          this.tagAttrList[i - 1].cy +

          this.cloudContent.offsetHeight / 2 -

          this.tagAttrList[i - 1].offsetHeight / 2 +

          "px";

      }

    },

    update() {

      let angleBasicA;

      let angleBasicB;



      if (this.active) {

        angleBasicA =

          (-Math.min(Math.max(-this.mouseY, -200), 200) / this.radius) *

          this.tspeed;

        angleBasicB =

          (Math.min(Math.max(-this.mouseX, -200), 200) / this.radius) *

          this.tspeed;

      } else {

        angleBasicA = this.lasta * 0.98;

        angleBasicB = this.lastb * 0.98;

      }



      //默认转动是后是否需要停下

      // lasta=a;

      // lastb=b;



      // if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)

      // {

      // return;

      // }

      this.sineCosine(angleBasicA, angleBasicB, 0);

      for (let j = 0; j < this.tagAttrList.length; j++) {

        let rx1 = this.tagAttrList[j].cx;

        let ry1 =

          this.tagAttrList[j].cy * this.cosA +

          this.tagAttrList[j].cz * -this.sinA;

        let rz1 =

          this.tagAttrList[j].cy * this.sinA +

          this.tagAttrList[j].cz * this.cosA;



        let rx2 = rx1 * this.cosB + rz1 * this.sinB;

        let ry2 = ry1;

        let rz2 = rx1 * -this.sinB + rz1 * this.cosB;



        let rx3 = rx2 * this.cosC + ry2 * -this.sinC;

        let ry3 = rx2 * this.sinC + ry2 * this.cosC;

        let rz3 = rz2;

        this.tagAttrList[j].cx = rx3;

        this.tagAttrList[j].cy = ry3;

        this.tagAttrList[j].cz = rz3;



        let per = 350 / (350 + rz3);



        this.tagAttrList[j].x = rx3 * per - 2;

        this.tagAttrList[j].y = ry3 * per;

        this.tagAttrList[j].scale = per;

        this.tagAttrList[j].alpha = per;



        this.tagAttrList[j].alpha =

          (this.tagAttrList[j].alpha - 0.6) * (10 / 6);

      }

      this.doPosition();

      this.depthSort();

    },

    doPosition() {

      let len = this.cloudContent.offsetWidth / 2;

      let height = this.cloudContent.offsetHeight / 2;

      for (let i = 0; i < this.tagAttrList.length; i++) {

        this.tagContent[i].style.left =

          this.tagAttrList[i].cx +

          len -

          this.tagAttrList[i].offsetWidth / 2 +

          "px";

        this.tagContent[i].style.top =

          this.tagAttrList[i].cy +

          height -

          this.tagAttrList[i].offsetHeight / 2 +

          "px";

        // this.tagContent[i].style.fontSize = Math.ceil(12 * this.tagAttrList[i].scale/2) + 8 + 'px';

        this.tagContent[i].style.fontSize =

          Math.ceil((12 * this.tagAttrList[i].scale) / 2) + 2 + "px";

        this.tagContent[i].style.filter =

          "alpha(opacity=" + 100 * this.tagAttrList[i].alpha + ")";

        this.tagContent[i].style.opacity = this.tagAttrList[i].alpha;

      }

    },

    depthSort() {

      let aTmp = [];

      for (let i = 0; i < this.tagContent.length; i++) {

        aTmp.push(this.tagContent[i]);

      }

      aTmp.sort((item1, item2) => item2.cz - item1.cz);

      for (let i = 0; i < aTmp.length; i++) {

        aTmp[i].style.zIndex = i;

      }

    },

    sineCosine(a, b, c) {

      this.sinA = Math.sin(a * this.dtr);

      this.cosA = Math.cos(a * this.dtr);

      this.sinB = Math.sin(b * this.dtr);

      this.cosB = Math.cos(b * this.dtr);

      this.sinC = Math.sin(c * this.dtr);

      this.cosC = Math.cos(c * this.dtr);

    },

  },

};

</script>

 

 

<style scoped>

.content {

  width: 100%;

  height: calc(100vh - 0px);

  background-image: url(../assets/liveimg.jpeg);

  /* 设置图片宽、高 */

  background-size: 100% 100%;

  /*按比例缩放*/

  background-repeat: no-repeat;

  display: flex;

  justify-content: space-around;

}

.cloud-bed {

  width: 300px;

  height: 200px;

}

.cloud-box {

  position: relative;

  margin: 20px auto 0px;

  width: 100%;

  height: 100%;

  background: #00000000;

}

.cloud-box span {

  position: absolute;

  padding: 3px;

  top: 0px;

  font-weight: bold;

  text-decoration: none;

  left: 0px;

  background-image: linear-gradient(to bottom, red, #fff);

  background-clip: text;

  color: transparent;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  text-align: center;



  display: flex;

  align-items: center;

  justify-content: center;



  /* line-height: 50px;

      overflow:hidden;

      white-space: nowrap;

      text-overflow: ellipsis; */

}

</style> 

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！！！