使用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>