Home > Developer > Web Develop
3D Tag Cloud implemented by pure JS, independent of any third-party library, supports mobile pages, js3d
<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>
<Html xmlns = "http://www.w3.org/1999/xhtml"><Span style = "white-space: pre"> </span><Span style = "white-space: pre"> </span> bitjjj@foxmail.com **/function tagcocould (container, options) {this. radius = 150; this. dtr = Math. PI/180; this. d = 500; this. mcList = []; this. active = false; this. lasta = 1; this. lastb = 1; this. distr = true; this. tspeed = 5; this. size = 250; this. mouseX = 0; this. mouseY = 0; this. howElliptical = 1; this. aA = null; this. oDiv = null; this. container = container; options = options | {}; For (var p in options) {this [p] = options [p] ;}} tagcocould. prototype. start = function () {var I = 0, oTag = null, self = this; this. oDiv = typeof this. container = "string "? Document. getElementById (this. container): this. container; this. aA = this. oDiv. getElementsByTagName ('A'); for (I = 0; I <this. aA. length; I ++) {oTag ={}; oTag. offsetWidth = this. aA [I]. offsetWidth; oTag. offsetHeight = this. aA [I]. offsetHeight; this. mcList. push (oTag);} this. sineCosine (0, 0); this. positionAll (); document. addEventListener ('mouseover', function () {self. active = true ;}, false); document. addEventList Ener ('mouseout', function () {self. active = false ;}, false); document. addEventListener ('mousemove ', function (evt) {// var oEvent = window. event | evt; self. onmove (window. event | evt) ;}, false); document. addEventListener ('touchstart', function () {self. active = true ;}, false); document. addEventListener ('touchmove ', function (evt) {self. onmove (window. event | evt) ;}, false); document. addEventListener ('touchend', func Tion () {self. active = false ;}, false); setInterval (function () {self. update () ;}, 30) ;}tagcocould. prototype. onmove = function (oEvent) {// var oEvent = window. event | evt; oEvent. preventDefault (); if (oEvent. touches & oEvent. touches. length> 0) {oEvent. clientX = oEvent. touches [0]. clientX; oEvent. clientY = oEvent. touches [0]. clientY;} 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;} tagcocould. prototype. update = function () {var a, 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 x 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, ry1 = this. mcList [j]. cy * this. ca + this. mcList [j]. cz * (-this. sa), rz1 = this. mcList [j]. cy * this. sa + this. mcList [j]. cz * this. ca, rx2 = rx1 * this. cb + rz1 * this. sb, ry2 = ry1, rz2 = rx1 * (-t His. sb) + rz1 * this. cb, rx3 = rx2 * this. cc + ry2 * (-this. SC), ry3 = rx2 * this. SC + ry2 * this. cc, 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]. alph A = (this. mcList [j]. alpha-0.6) * (10/6);} this. doPosition (); this. depthSort ();} tagcocould. prototype. depthSort = function () {var I = 0, aTmp = []; for (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 (I = 0; I <aTmp. length; I ++) {aTmp [I]. style. zIndex = I ;}} tagcocould. prototype. pos ItionAll = function () {var phi = 0, theta = 0, max = this. mcList. length, I = 0, aTmp = [], oFragment = document. createDocumentFragment (); // random order for (I = 0; I <this. aA. length; I ++) {aTmp. push (this. aA [I]);} aTmp. sort (function () {return Math. random () <0.5? 1:-1 ;}); for (I = 0; I <aTmp. length; I ++) {oFragment. appendChild (aTmp [I]);} this. oDiv. appendChild (oFragment); for (var 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);} // Coordinate Transformation 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 ';} tagcocould. prototype. doPosition = function () {var l = this. oDiv. offsetWidth/2, t = this. oDiv. offsetHeight/2; for (var 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 ;}} tagcocould. prototype. sineCosine = function (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);} window. onload = function () {var tagCloud = new tagcocould ("div1", {}); tagCloud. start () ;}</script> <style type = "text/css"> body {/* background: #000 url(index.png) no-repeat center 230px; */} # div1 {position: relative; width: 0%; height: 500px; margin: 0 auto;} # div1 a {position: absolute; top: 0px; left: 0px; font-family: Microsoft YaHei; color: #000; font-weight: bold; text-decoration: none; padding: 3px 6px;} # div1 a: hover {border: 1px solid # eee; background: # ccc ;}# div1. blue {color: blue ;}# div1. red {color: red ;}# div1. yellow {color: yellow;} p {font: 16px Microsoft YaHei; text-align: center; color: # ba0c0c;} p a {font-size: 14px; color: # ba0c0c;} p a: hover {color: red ;} </style>
Github Code address: https://github.com/bitjjj/JS-3D-TagCloud
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
