HTML实现标签云

最新推荐文章于 2024-07-12 20:49:16 发布

m0_52239519

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量182

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_52239519/article/details/133527281

版权

在这里插入图片描述
使用HTML和js实现标签云效果


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				width: 400px;
				height: 400px;
				
				border-radius: 50%;
				margin: 50px auto;
				position: relative;
				
			}
			.box a{
				white-space: nowrap;
				position: absolute;
				top: 0;
				left: 0;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="#">三国演义</a>
			<a href="#">水浒传</a>
			<a href="#">红楼梦</a>
			<a href="#">西游记</a>
			<a href="#">三国演义</a>
			<a href="#">三国演义</a>
			<a href="#">水浒传</a>
			<a href="#">红楼梦</a>
			<a href="#">西游记</a>
			<a href="#">三国演义</a>
			<a href="#">三国演义</a>
			<a href="#">水浒传</a>
			<a href="#">红楼梦</a>
			<a href="#">西游记</a>
			<a href="#">三国演义</a>
			<a href="#">三国演义</a>
			<a href="#">水浒传</a>
			<a href="#">红楼梦</a>
			<a href="#">西游记</a>
			<a href="#">三国演义</a>
		</div>
	</body>
	<script type="text/javascript">
		var r=200;
		var box=document.getElementsByClassName('box')[0];
		var tags=document.querySelectorAll('.box a');
		var len=tags.length;
		var all=[];
		var rotax=Math.PI/180*2;
		var rotay=Math.PI/180*2;
		var rotaz=Math.PI/180*2;
		for(var i=0;i<len;i++){
			var a=Math.acos(((2*(i+1))-1)/len-1);
			var b=a*Math.sqrt(len*Math.PI);
			var x=r*Math.sin(a)*Math.cos(b);
			var y=r*Math.sin(a)*Math.sin(b);
			var z=r*Math.cos(a);
			var t=new Tag(tags[i],x,y,z);
			all.push(t);
		}
		function Tag(obj,x,y,z){
			this.x=x;
			this.y=y;
			this.z=z;
			this.obj=obj;
			this.init=function(){
				var r=Math.floor(Math.random()*255);
				var g=Math.floor(Math.random()*255);
				var b=Math.floor(Math.random()*255);
				this.obj.style.color="rgb("+r+","+g+","+b+")";
				this.setPosition(this.x,this.y,this.z)
				
			}
			this.setPosition=function(x,y,z){
			    this.x=x;
				this.y=y;
				this.z=z;
				this.obj.style.top=this.y+r-this.obj.offsetHeight/2+'px';
				this.obj.style.left=this.x+r-this.obj.offsetWidth/2+'px';
				this.obj.style.fontSize=(this.z+r)/r*10+10+'px';
				this.obj.style.zIndex=Math.ceil(this.z);
			}
			
			this.rotatex=function(){
				var y0=this.y*Math.cos(rotax)-this.z*Math.sin(rotax);
				var z0=this.y*Math.sin(rotax)+this.z*Math.cos(rotax);
				var x0=this.x;
				this.setPosition(x0,y0,z0)
			}
			this.rotatey=function(){
				var y0=this.y;
				var x0=this.z*Math.sin(rotay)+this.x*Math.cos(rotay);
				var z0=this.z*Math.cos(rotay)-this.x*Math.sin(rotay);
				this.setPosition(x0,y0,z0)
			}
			this.rotatez=function(){
				var x0=this.x*Math.cos(rotaz)-this.y*Math.sin(rotaz);
				var y0=this.x*Math.sin(rotaz)+this.y*Math.cos(rotaz);
				var z0=this.z;
				this.setPosition(x0,y0,z0)
			}
			this.init();
		}
		
			var t=setInterval(function(){
					for(var i=0;i<len;i++){
						all[i].rotatex();
						all[i].rotatey();
					}
					
			},100)
		var sx=0;
		var sy=0
		box.onmouseenter=function(e){
			sx=e.clientX;
			sy=e.clientY;
		}
		box.onmousemove=function(e){
			var x=e.clientX;
			var y=e.clientY;
			if(x>sx){
				rotay+=0.02;
			}else{
				rotay-=0.02;
				
			}
			if(y>sy){
				rotax-=0.02;
			}else{
				rotax+=0.02;
				
			}
			rotax=rotax>=0.06?0.06:rotax;
			rotay=rotay>=0.06?0.06:rotay
			rotax=rotax<=-0.06?-0.06:rotax;
			rotay=rotay<=-0.06?-0.06:rotay
			sx=x;
			sy=y;
		}
	</script>
</html>