Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to achieve 3D tag cloud in Vue. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's learn about it.

Preview:

Code:

Page section:

{{item.name}}

CSS section:

/ / tag cloud. 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 section:

Export default {name: "tagcloud", data () {return {tagList: [], radius: 120, dtr: Math.PI / 180,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: {/ / generate random number getRandomNum () {return Math.floor () * (255 + 1)) }, / / trigonometric function calculation 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);}, / / set initial positioning positionAll () {this.$nextTick () = > {/ / Note: all methods executed in the onReady method require $nextTick to ensure that all tags have been rendered var phi = 0; var theta = 0; var max = this.mcList.length; var aTmp = [] Var oFragment = document.createDocumentFragment (); / / Random sort 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); } // 坐标变换 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"; } }) }, // 坐标更新 让标签动起来 update() { this.$nextTick(() =>

{/ / Note: all methods executed in the onReady method require $nextTick to ensure that all tags have been rendered 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) {/ / Note: all methods executed in the onReady method require $nextTick to ensure that all tags have been rendered 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; } }) }, // 网络请求 拿到tagList query() { // 假装从接口拿回来的数据 let tagListOrg = [ { name: "标签1", url: "www.baidu.com" }, { name: "标签2", url: "www.baidu.com" }, { name: "标签3", url: "www.baidu.com" }, { name: "标签4", url: "www.baidu.com" }, { name: "标签5", url: "www.baidu.com" }, { name: "标签6", url: "www.baidu.com" }, { name: "标签7", url: "www.baidu.com" }, { name: "标签8", url: "www.baidu.com" }, { name: "标签9", url: "www.baidu.com" }, { name: "标签10", url: "www.baidu.com" }, { name: "标签11", url: "www.baidu.com" }, { name: "标签12", url: "www.baidu.com" }, { name: "标签13", url: "www.baidu.com" }, { name: "标签14", url: "www.baidu.com" }, { name: "标签15", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签16", url: "www.baidu.com" }, { name: "标签17", url: "www.baidu.com" } ]; // 给tagList添加随机颜色 tagListOrg.forEach(item =>

{item.color = "rgb (" + this.getRandomNum () + "," + this.getRandomNum () + "," + this.getRandomNum () + ");}) this.tagList = tagListOrg; this.onReady ();}, / / generate tag cloud 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) / / timer execution cannot write setInterval (this.update (), 30)}, created () {this.$nextTick (()) = > {this.query ();})}} these are all the contents of the article "how to implement 3D tag Cloud in Vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.