• Vue三种3D动态词云实现

    Vue三种3D动态词云实现

    点击打开视频讲解，及效果展示

    效果图：
    在这里插入图片描述

    一、Vue实现球体词云方式

    <template>
  <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>
</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: '功能bug',
            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: 'UI/UX',
            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 / 2
        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>
.cloud-bed {
  width: 200px;
  height: 200px;
  margin: auto;
}
.cloud-box{
    position:relative;
    margin:20px auto 0px;
    width: 100%;
    height: 100%;
    background:	#00000000;
  }
 .cloud-box span{
      position: absolute;
      padding: 3px 6px;
      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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292

    二、Vue实现词云

    <template>
  <div id="app">
    <svg style="background-color: black" :width="width" :height="height">
      <a class="fontA" v-for="(tag, index) in tags" :key="`tag-${index}`">
        <text
          :id="tag.id"
          :x="tag.x"
          :y="tag.y"
          :font-size="20 * (600 / (600 - tag.z))"
          :fill-opacity="(400 + tag.z) / 600"
          @mousemove="listenerMove($event)"
          @mouseout="listenerOut($event)"
          @click="clickToPage"
        >
          {{ tag.text }}
        </text>
      </a>
    </svg> 


    <!-- <svg style="background-color: black" :width="width" :height="height">
      <a class="fontA" v-for="(tag, index) in tags" :key="`tag-${index}`">
        <text
          :id="tag.id"
          :x="tag.x"
          :y="tag.y"
          :font-size="20 * (600 / (600 - tag.z))"
          :fill-opacity="(400 + tag.z) / 600"
          @mousemove="listenerMove($event)"
          @mouseout="listenerOut($event)"
          @click="clickToPage"
        >
          {{ tag.text }}
        </text>
      </a>
    </svg> -->
  </div>
</template>

<script>
export default {
  name: "word-cloud",
  //数据，宽，高，半径，半径一般位宽高的一半。
  // props: ["data", "width", "height", "RADIUS"],
  data() {
    return {
      width: 600, //svg宽度
      height: 600, //svg高度
      tagsNum: 0, //标签数量
      RADIUS: 300, //球的半径
      speedX: Math.PI / 360 / 1.5, //球一帧绕x轴旋转的角度
      speedY: Math.PI / 360 / 1.5, //球-帧绕y轴旋转的角度
      tags: [],
      data: [
        "金晨",
        "昆凌",
        "李冰冰",
        "刘诗诗",
        "刘雯",
        "刘亦菲",
        "林心如",
        "林志玲",
        "李湘",
        "李亚男",
        "李若彤",
        "李沁",
        "李嘉欣",
        "林依晨",
        "刘嘉玲",
        "闰妮",
        "李宇春",
        "李晟",
        "罗震环",
        "刘雨欣",
        "李波儿",
        "黎姿",
        "张敏",
        "梁小冰",
        "黎美娴",
        "李彩桦",
        "林允儿",
        "米雪",
        "李菲儿",
        "娄艺潇",
        "李金铭",
        "李萌萌",
      ],
      timer: null,
    };
  },
  computed: {
    CX() {
      //球心x坐标
      return this.width / 2;
    },
    CY() {
      //球心y坐标
      return this.height / 2;
    },
  },
  created() {
    this.initData();
  },
  methods: {
    // 初始化数据
    initData() {
      //初始化标签位置
      let tags = [];
      this.tagsNum = this.data.length;
      for (let i = 0; i < this.data.length; i++) {
        let tag = {};
        let k = -1 + (2 * (i + 1) - 1) / this.tagsNum;
        let a = Math.acos(k);
        let b = a * Math.sqrt(this.tagsNum * Math.PI); //计算标签相对于球心的角度
        tag.text = this.data[i];
        tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b); //根据标签角度求出标签的x,y,z坐标
        tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b);
        tag.z = this.RADIUS * Math.cos(a);
        tag.id = i; // 给标签添加id
        tags.push(tag);
        console.log(tag);
      }
      this.tags = tags; //让vue替我们完成视图更新
    },
    // 纵向旋转
    rotateX(angleX) {
      var cos = Math.cos(angleX);
      var sin = Math.sin(angleX);
      for (let tag of this.tags) {
        var y1 = (tag.y - this.CY) * cos - tag.z * sin + this.CY;
        var z1 = tag.z * cos + (tag.y - this.CY) * sin;
        tag.y = y1;
        tag.z = z1;
      }
    },
    // 横向旋转
    rotateY(angleY) {
      var cos = Math.cos(angleY);
      var sin = Math.sin(angleY);
      for (let tag of this.tags) {
        var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;
        var z1 = tag.z * cos + (tag.x - this.CX) * sin;
        tag.x = x1;
        tag.z = z1;
      }
    },
    // 运动函数
    runTags() {
      if (typeof this.timer === "number") {
        clearInterval(this.timer);
        this.timer = null;
      }
      let timer = setInterval(() => {
        this.rotateX(this.speedX);
        this.rotateY(this.speedY);
      }, 17);
      this.timer = timer;
    },
    // 监听移入事件
    listenerMove(e) {
      if (e.target.id) {
        clearInterval(this.timer);
      }
    },
    // 监听移出事件
    listenerOut(e) {
      if (e.target.id) {
        this.runTags();
      }
    },
    // 点击事件
    clickToPage() {},
  },
  mounted() {
    this.runTags();
  },
};
</script>


<style scoped>
.fontA {
  fill: #60cae9;
  font-weight: bold;
}
.fontA:hover {
  fill: #ffffff;
  cursor: pointer;
}
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190

    三、jquery实现词云

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>3D词云</title>
  <style>
    .wordCloud__tagBall {
      margin: 50px auto;
      position: relative;
    }

    .wordCloud__tag {
      display: block;
      position: absolute;
      left: 0px;
      top: 0px;
      color: green;
      text-decoration: none;
      font-size: 15px;
      font-family: '微软雅黑';
      font-weight: bold;
      cursor: pointer;
    }

    .wordCloud__tag:hover {
      color: red !important;
    }

    .wordCloud__home {
      display: flex;
      justify-content: center;
    }
  </style>
</head>

<body>
  <div id="main">
    <div class="wordCloud__tagBall" style="width: 500px; height: 500px ">
    </div>
    <div class="wordCloud__home">
      <button class="btn0" type="button">降低速度</button>
      <button class="btn1" type="button">横向顺时针</button>
      <button class="btn2" type="button">横向逆时针</button>
      <button class="btn3" type="button">纵向顺时针</button>
      <button class="btn4" type="button">纵向逆时针</button>
      <button class="btn5" type="button">增加速度</button>
    </div>
  </div>
  <script src = "../node_modules/jquery/dist/jquery.js"></script>
  <script src = "../node_modules/jquery/dist/jquery-ui.min.js"></script>
  <script>
    $(function () {
      var myval
      var width = 500
      var height = 500
      var contentEle = []
      var data = ['云图', '是个啥', '他啥都不是', '他就是词云', '就是他呆子', '傻子和疯子', '营养快线', '哈哈哈到家', '瑞士军刀', 'DW情侣对表', '清风抽纸', '这一刻更清晰', '债券评级', '呵呵旧宫style', '云图', '是个啥', '他啥都不是', '他就是词云', '就是他呆子', '傻子和疯子', '营养快线', '哈哈哈到家', '瑞士军刀', 'DW情侣对表', '清风抽纸', '这一刻更清晰', '债券评级', '呵呵旧宫style']
      var direction = '-1'
      var speed = 3000
      var color = ['#2D4DB6', '#04B67C', '#D1AF07', '#E27914', '#CB4A4D', '#B02690']
      function innit() {
        const RADIUSX = (width - 50) / 2
        const RADIUSY = (height - 50) / 2
        contentEle = []
        for (let i = 0; i < data.length; i += 1) {
          const k = -1 + (2 * (i + 1) - 1) / data.length
          const a = Math.acos(k)
          const b = a * Math.sqrt(data.length * Math.PI)
          const x = RADIUSX * Math.sin(a) * Math.cos(b)
          const y = RADIUSY * Math.sin(a) * Math.sin(b)
          const z = RADIUSX * Math.cos(a)
          const singleEle = {
            x,
            y,
            z,
            style: {},
          }
          contentEle.push(singleEle)
        }
        animate()
      }
      function animate() {
        rotateX()
        rotateY()
        move()
        window.requestAnimationFrame(animate)
      }
      function rotateX() {
        const angleX = ['-1', '1'].includes(direction)
          ? Math.PI / Infinity
          : Math.PI / ((Number(direction) / 2) * Number(speed))
        const cos = Math.cos(angleX)
        const sin = Math.sin(angleX)
        contentEle = contentEle.map((t) => {
          const y1 = t.y * cos - t.z * sin
          const z1 = t.z * cos + t.y * sin
          return {
            ...t,
            y: y1,
            z: z1,
          }
        })
      }
      function rotateY() {
        const angleY = ['-2', '2'].includes(direction)
          ? Math.PI / Infinity
          : Math.PI / (Number(direction) * Number(speed))
        const cos = Math.cos(angleY)
        const sin = Math.sin(angleY)
        contentEle = contentEle.map((t) => {
          const x1 = t.x * cos - t.z * sin
          const z1 = t.z * cos + t.x * sin
          return {
            ...t,
            x: x1,
            z: z1,
          }
        })
      }
      function move() {
        const CX = width / 2
        const CY = height / 2
        contentEle = contentEle.map((singleEle) => {
          const { x, y, z } = singleEle
          const fallLength = 500
          const RADIUS = (width - 50) / 2
          const scale = fallLength / (fallLength - z)
          const alpha = (z + RADIUS) / (2 * RADIUS)
          const left = `${x + CX - 15}px`
          const top = `${y + CY - 15}px`
          const transform = `translate(${left}, ${top}) scale(${scale})`
          const style = {
            ...singleEle.style,
            opacity: alpha + 0.5,
            zIndex: parseInt(scale * 100, 10),
            transform,
          }
          return {
            x,
            y,
            z,
            style,
          }
        })
      }
      function handleRotate(value) {
        direction = value
      }
      function handleSpeed(value) {
        const speedObj = {
          fast: -50,
          slow: 50,
        }
        speed += speedObj[value]
        if (speed === 0) {
          speed = 50
        }
      }
      function init() {
        var html_ = ''
        for (var i = 0; i < data.length; i++) {
          let color_ = color[i % color.length]
          html_ += '+ color_ + ';opacity:' + contentEle[i].style.opacity + ';transform:' + contentEle[i].style.transform + ';zIndex:' + contentEle[i].style.zIndex + '">' + data[i] + ''
        }
        $('.wordCloud__tagBall').html(html_)
      }


      innit()
      myval = setInterval(() => {
        init()
      }, 10)

      //横向顺时针
      $('.btn1').on('click', function () {
        handleRotate('-1')
      })
      //横向逆时针
      $('.btn2').on('click', function () {
        handleRotate('1')
      })
      //纵向顺时针
      $('.btn3').on('click', function () {
        handleRotate('-2')
      })
      //纵向逆时针
      $('.btn4').on('click', function () {
        handleRotate('2')
      })
      //增加速度
      $('.btn5').on('click', function () {
        handleSpeed('fast')
      })
      //增加速度
      $('.btn0').on('click', function () {
        handleSpeed('slow')
      })

      $('.wordCloud__tagBall').on('mouseenter', function () {
        clearInterval(myval)
      })
      $('.wordCloud__tagBall').on('mouseleave', function () {
         myval = setInterval(() => {
          init()
        }, 10)
      })
      $('body').on('click', 'span', function () {
        console.log($(this)[0].innerHTML);
      })
    })
  </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215

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

  • 相关阅读:
    【GCN基础学习】GCN基本模型概述，图卷积的基本计算方法，邻接矩阵的变换，GCN变换原理
    java 相似度计算
    【SpringMVC应用篇】SpringMVC请求参数处理
    JavaScript—分支结构和循环结构整理
    关于webpack面试题
    ROS1云课→22机器人轨迹跟踪
    【微服务】Nacos初体验
    Idea断点调试（debug）详解
    图书管理系统的设计与实现/ssm的图书管理网站
    redis 发布订阅（PubSub），深入解读
  • 原文地址：https://blog.csdn.net/LS_952754/article/details/126619072