預(yù)覽:

代碼:頁面部分:

<template> <div ref='tagcloudall'> <a v-for='item in tagList' :href='http://m.propowerdrill.cn/bcjs/item.url' rel='external nofollow' :style='’color:’ + item.color + ’;top: 0;left: 0;filter:none;’'>{{item.name}}</a> </div></template>

CSS部分:

// 標(biāo)簽云.tagcloud-all { position: relative; a { position: absolute; top: 0px; left: 0px; color: #fff; font-weight: bold; text-decoration: none; padding: 3px 6px; &:hover { color: #FF0000; letter-spacing: 2px; } }}

JS部分:

export default { name: 'tagcloud', data() { return { tagList: [], radius: 120, dtr: Math.PI / 180, d: 300, mcList: [], active: false, lasta: 1, lastb: 1, distr: true, tspeed: 10, size: 250, mouseX: 0, mouseY: 0, howElliptical: 1, oList: null, oA: null, sa: 0, ca: 0, sb: 0, cb: 0, sc: 0, cc: 0 } }, methods: { // 生成隨機(jī)數(shù) getRandomNum() { return Math.floor(Math.random() * (255 + 1)); }, // 三角函數(shù)角度計(jì)算 sineCosine(a, b, c) { this.sa = Math.sin(a * this.dtr); this.ca = Math.cos(a * this.dtr); this.sb = Math.sin(b * this.dtr); this.cb = Math.cos(b * this.dtr); this.sc = Math.sin(c * this.dtr); this.cc = Math.cos(c * this.dtr); }, // 設(shè)置初始定位 positionAll() { this.$nextTick(() => { // 注意: 所有的在onReady方法中執(zhí)行的方法都需要$nextTick確保所有的標(biāo)簽都已經(jīng)渲染var phi = 0;var theta = 0;var max = this.mcList.length;var aTmp = [];var oFragment = document.createDocumentFragment();// 隨機(jī)排序for (let i = 0; i < this.tagList.length; i++) { aTmp.push(this.oA[i]);}aTmp.sort(() => { return Math.random() < 0.5 ? 1 : -1;});for (let i = 0; i < aTmp.length; i++) { oFragment.appendChild(aTmp[i]);}this.oList.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); } // 坐標(biāo)變換 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.oA[i - 1].style.left = this.mcList[i - 1].cx + this.oList.offsetWidth / 2 - this.mcList[i - 1].offsetWidth / 2 + ’px’; this.oA[i - 1].style.top = this.mcList[i - 1].cy + this.oList.offsetHeight / 2 - this.mcList[i - 1].offsetHeight / 2 + ’px’;} }) }, // 坐標(biāo)更新 讓標(biāo)簽動(dòng)起來 update() { this.$nextTick(() => { // 注意: 所有的在onReady方法中執(zhí)行的方法都需要$nextTick確保所有的標(biāo)簽都已經(jīng)渲染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.ca + this.mcList[j].cz * (-this.sa); var rz1 = this.mcList[j].cy * this.sa + this.mcList[j].cz * this.ca; var rx2 = rx1 * this.cb + rz1 * this.sb; var ry2 = ry1; var rz2 = rx1 * (-this.sb) + rz1 * this.cb; var rx3 = rx2 * this.cc + ry2 * (-this.sc); var ry3 = rx2 * this.sc + ry2 * this.cc; var rz3 = rz2; this.mcList[j].cx = rx3; this.mcList[j].cy = ry3; this.mcList[j].cz = rz3; var 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(); }) }, // doPosition() { this.$nextTick(() => { // 注意: 所有的在onReady方法中執(zhí)行的方法都需要$nextTick確保所有的標(biāo)簽都已經(jīng)渲染var l = this.oList.offsetWidth / 2;var t = this.oList.offsetHeight / 2;for (var i = 0; i < this.mcList.length; i++) { this.oA[i].style.left = this.mcList[i].cx + l - this.mcList[i].offsetWidth / 2 + ’px’; this.oA[i].style.top = this.mcList[i].cy + t - this.mcList[i].offsetHeight / 2 + ’px’; this.oA[i].style.fontSize = Math.ceil(12 * this.mcList[i].scale / 2) + 8 + ’px’; // this.oA[i].style.filter = 'alpha(opacity=' + 100 * this.mcList[i].alpha + ')'; this.oA[i].style.opacity = this.mcList[i].alpha;} }) }, // depthSort() { this.$nextTick(() => { // 注意: 所有的在onReady方法中執(zhí)行的方法都需要$nextTick確保所有的標(biāo)簽都已經(jīng)渲染var aTmp = [];for (let i = 0; i < this.oA.length; i++) { aTmp.push(this.oA[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;} }) }, // 網(wǎng)絡(luò)請求 拿到tagList query() { // 假裝從接口拿回來的數(shù)據(jù) let tagListOrg = [{ name: ’標(biāo)簽1’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽2’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽3’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽4’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽5’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽6’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽7’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽8’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽9’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽10’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽11’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽12’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽13’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽14’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽15’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽16’, url: ’www.baidu.com’ },{ name: ’標(biāo)簽17’, url: ’www.baidu.com’ } ]; // 給tagList添加隨機(jī)顏色 tagListOrg.forEach(item => {item.color = 'rgb(' + this.getRandomNum() + ',' + this.getRandomNum() + ',' + this.getRandomNum() + ')'; }) this.tagList = tagListOrg; this.onReady(); }, // 生成標(biāo)簽云 onReady() { this.$nextTick(() => {this.oList = this.$refs.tagcloudall;this.oA = this.oList.getElementsByTagName(’a’)var oTag = null;for (var i = 0; i < this.oA.length; i++) { oTag = {}; oTag.offsetWidth = this.oA[i].offsetWidth; oTag.offsetHeight = this.oA[i].offsetHeight; this.mcList.push(oTag);}this.sineCosine(0, 0, 0);this.positionAll();this.oList.onmouseover = () => { this.active = true;}this.oList.onmouseout = () => { this.active = false;}this.oList.onmousemove = (event) => { var oEvent = window.event || event; this.mouseX = oEvent.clientX - (this.oList.offsetLeft + this.oList.offsetWidth / 2); this.mouseY = oEvent.clientY - (this.oList.offsetTop + this.oList.offsetHeight / 2); this.mouseX /= 5; this.mouseY /= 5;}setInterval(() => { this.update()}, 30); // 定時(shí)器執(zhí)行 不能寫setInterval(this.update(), 30) }) } }, created() { this.$nextTick(() => { this.query(); }) }}

到此這篇關(guān)于Vue中實(shí)現(xiàn)3D標(biāo)簽云的文章就介紹到這了,更多相關(guān)Vue 3D標(biāo)簽云內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！