纯JS实现的3D标签云，不依赖任何第三方库，支持移动页面

最新推荐文章于 2023-11-22 22:30:00 发布

kittyjie

最新推荐文章于 2023-11-22 22:30:00 发布

阅读量6.8k

点赞数

分类专栏： Web前端点滴技巧

本文链接：https://blog.csdn.net/kittyjie/article/details/37904579

版权

Web前端点滴技巧专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<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>bitjjj@foxmail.com
	**/
	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