云标签+canvas
云标签+canvas<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
a{position: absolute;text-decoration: none;color:#666;border-right:1px solid #666;border-bottom:1px solid #666;}
a:hover{color:#000;}
canvas{position: absolute;width: 600px;height:600px;}
#ball{position:relative;width: 600px;height:600px;margin: 0 auto}
</style>
</head>
<body >
<div id="ball">
<a href="#" title="星级评分">星级评分</a>
<a href="#" title="层特效">层特效</a>
<a href="#" title="关键字">关键字</a>
<a href="#" title="拖拽">拖拽</a>
<a href="#" title="分页插件">bootstrap</a>
<a href="#" title="时间插件">Route</a>
<a href="#" title="弹出层">弹出层</a>
<a href="#" title="数据统计">ReactJS</a>
<a href="#" title="HTML5">HTML5</a>
<a href="#" title="置顶特效">置顶特效</a>
<a href="#" title="选项卡">选项卡</a>
<a href="#" title="导航菜单">导航菜单</a>
<a href="#" title="原创">原创</a>
<a href="#" title="动画插件">动画插件</a>
<a href="#" title="实用特效">实用特效</a>
<a href="#" title="table插件">AngularJS</a>
<a href="#" title="文字特效">文字特效</a>
<a href="#" title="图片特效">图片特效</a>
<a href="#" title="在线客服">在线客服</a>
<a href="#" title="瀑布流">瀑布流</a>
<a href="#" title="网友蘑菇">网友蘑菇</a>
<canvas ></canvas>
</div>
</body>
</html>
<script type="text/javascript">
(function(){
var tagsE=document.getElementsByTagName("a"),
tags=[],
box=document.getElementById("ball"),
radius=180,
angleX=Math.PI/180,
angleY=Math.PI/180,
fullLength=300,
offsetLeft=box.offsetLeft,
offsetTop=box.offsetTop,
CX=box.offsetWidth/2,
CY=box.offsetHeight/2,
animated=false,
cvs=document.querySelector("canvas"),
ctx=cvs.getContext("2d");
cvs.width="600";
cvs.height="600";
cvs.style.zIndex=tagsE.length/2;
function tag(e,x,y,z){
this.e=e;
this.x=x;
this.y=y;
this.z=z;
}
function initial(){
for(var i=0;i<tagsE.length;i++){
var a=Math.acos((2*(i+1)-1)/tagsE.length - 1);
var b = a*Math.sqrt(tagsE.length*Math.PI);
var x = radius * Math.sin(a) * Math.cos(b);
var y = radius * Math.sin(a) * Math.sin(b);
var z = radius * Math.cos(a);
tags.push(new tag(tagsE,x,y,z));
}
tags.forEach(function(e,index,group){
e.move();
});
}
tag.prototype.move=function(){
var scale=(fullLength+this.z)/fullLength/1.1;
var opacity=(this.z+radius*2)/(radius*2);
this.e.style.fontSize=scale*18+"px";
this.e.style.opacity=opacity;
this.e.style.left=this.x+CX-this.e.offsetWidth/2+"px";
this.e.style.top=this.y+CY-this.e.offsetHeight/2+"px";
this.e.style.zIndex=parseInt(scale*10);
}
box.onmousemove=function(e){
animated=true;
angleY=-(e.clientY-offsetTop-CY)*0.0002;
angleX=(e.clientX-offsetLeft-CX)*0.0002;
};
box.onmouseout=function(){
animated=false;
}
function rotate(){
ca=Math.cos(angleY);
sa=Math.sin(angleY);
cb=Math.cos(angleX);
sb=Math.sin(angleX);
tags.forEach(function(element,index,group){
var rx1=element.x;
var ry1=element.y*ca+element.z*(-sa);
var rz1=element.y*sa+element.z*ca;
var rx2=rx1*cb+rz1*sb;
var ry2=ry1;
var rz2=rx1*(-sb)+rz1*cb;
element.x=rx2;
element.y=ry2;
element.z=rz2;
});
}
function animate(){
rotate();
tags.forEach(function(e,index,group){
e.move();
});
if(!animated){
angleX*=0.98;
angleY*=0.98;
}
drawCanvas();
requestAnimationFrame(animate);
}
function drawCanvas(){
ctx.clearRect(0,0,CX*2,CY*2);
ctx.strokeStyle="rgba(141,141,141,.6)";
tags.forEach(function(element,index,group){
ctx.beginPath();
ctx.moveTo(CX,CY);
ctx.lineWidth=(element.z+radius*2)/(radius*2);
ctx.lineTo(element.x+CX+parseInt(element.e.offsetWidth)/2,element.y+CY+parseInt(element.e.offsetHeight)/2);
ctx.stroke();
});
}
initial();
animate();
})();
</script>
效果预览：
页:
[1]