纯JS实现的3D标签云，不依赖任何第三方库，支持移动页面
<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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>标签云</title> <script type="text/javascript"> /** 代码来源于：http://www.oleou.com/a/jishu/2014/0613/290.html
<span style="white-space:pre"> </span>经过了本人规范化，欢迎大家使用
<span style="white-space:pre"> </span>[email protected] **/ function TagCould(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]; } } TagCould.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,0 ); this.positionAll(); document.addEventListener('mouseover',function(){ self.active = true; }, false); document.addEventListener('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',function(){ self.active = false; }, false); setInterval(function(){ self.update(); }, 30); } TagCould.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; } TagCould.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 * 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 * (-this.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].alpha = (this.mcList[j].alpha - 0.6) * ( 10 / 6 ); } this.doPosition(); this.depthSort(); } TagCould.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; } } TagCould.prototype.positionAll = function (){ var phi = 0,theta = 0,max = this.mcList.length,i = 0,aTmp = [], oFragment = document.createDocumentFragment(); //随机排序 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); } //坐标变换 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'; } } TagCould.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; } } TagCould.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 TagCould("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> </head> <body> <div id="div1"> <a href="http://www.oleou.com/tags/中国/" class="tagc1">中国</a> <a href="http://www.oleou.com/tags/金融/" class="tagc2">金融</a> <a href="http://www.oleou.com/tags/营销/" class="tagc1">营销</a> <a href="http://www.oleou.com/tags/服务/" class="tagc2">服务</a> <a href="http://www.oleou.com/tags/家电/" class="tagc1">家电</a> <a href="http://www.oleou.com/tags/兰州/" class="tagc1">兰州</a> <a href="http://www.oleou.com/tags/管道/" class="tagc1">管道</a> <a href="http://www.oleou.com/tags/维修/" class="tagc2">维修</a> <a href="http://www.oleou.com/tags/电脑/" class="tagc2">电脑</a> <a href="http://www.oleou.com/tags/路由器/" class="tagc2">路由器</a> <a href="http://www.oleou.com/tags/无线/" class="tagc2">无线</a> <a href="http://www.oleou.com/tags/tp link/" class="tagc1">tp link</a> <a href="http://www.oleou.com/tags/桥接/" class="tagc2">桥接</a> <a href="http://www.oleou.com/tags/设置/" class="tagc2">设置</a> <a href="http://www.oleou.com/tags/2003/" class="tagc2">2003</a> <a href="http://www.oleou.com/tags/端口/" class="tagc1">端口</a> <a href="http://www.oleou.com/tags/windows/" class="tagc2">windows</a> <a href="http://www.oleou.com/tags/远程/" class="tagc2">远程</a> <a href="http://www.oleou.com/tags/用友/" class="tagc2">用友</a> <a href="http://www.oleou.com/tags/软件/" class="tagc2">软件</a> <a href="http://www.oleou.com/tags/对方科目/" class="tagc2">对方科目</a> <a href="http://www.oleou.com/tags/调整单/" class="tagc2">调整单</a> <a href="http://www.oleou.com/tags/出库类别/" class="tagc1">出库类别</a> <a href="http://www.oleou.com/tags/操作/" class="tagc1">操作</a> <a href="http://www.oleou.com/tags/恢复/" class="tagc2">恢复</a> <a href="http://www.oleou.com/tags/sql/" class="tagc2">sql</a> <a href="http://www.oleou.com/tags/导入/" class="tagc2">导入</a> <a href="http://www.oleou.com/tags/分享/" class="tagc6">分享</a> <a href="http://www.oleou.com/tags/效果/" class="tagc2">效果</a> <a href="http://www.oleou.com/tags/兼容/" class="tagc1">兼容</a> <a href="http://www.oleou.com/tags/域名/" class="tagc2">域名</a> </div> </body> </html>
Github代码地址：https://github.com/bitjjj/JS-3D-TagCloud
