PHPIN.NET

 找回密码
 立即注册
查看: 6421|回复: 0

[HTML5/CSS3] 云标签+canvas

[复制链接]

469

主题

31

回帖

5491

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5491
发表于 2016-11-3 10:39:42 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
云标签+canvas
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title></title>
  5.         <style type="text/css">
  6.                 a{position: absolute;text-decoration: none;color:#666;border-right:1px solid #666;border-bottom:1px solid #666;}
  7.                 a:hover{color:#000;}
  8.                 canvas{position: absolute;width: 600px;height:600px;}
  9.                 #ball{position:relative;width: 600px;height:600px;margin: 0 auto}
  10.         </style>
  11. </head>
  12. <body >
  13.         <div id="ball">
  14.                 <a href="#" title="星级评分">星级评分</a>
  15.             <a href="#" title="层特效">层特效</a>
  16.             <a href="#" title="关键字">关键字</a>
  17.             <a href="#" title="拖拽">拖拽</a>
  18.             <a href="#" title="分页插件">bootstrap</a>
  19.             <a href="#" title="时间插件">Route</a>
  20.             <a href="#" title="弹出层">弹出层</a>
  21.             <a href="#" title="数据统计">ReactJS</a>
  22.             <a href="#" title="HTML5">HTML5</a>
  23.             <a href="#" title="置顶特效">置顶特效</a>
  24.             <a href="#" title="选项卡">选项卡</a>
  25.             <a href="#" title="导航菜单">导航菜单</a>
  26.             <a href="#" title="原创">原创</a>
  27.             <a href="#" title="动画插件">动画插件</a>
  28.             <a href="#" title="实用特效">实用特效</a>
  29.             <a href="#" title="table插件">AngularJS</a>
  30.             <a href="#" title="文字特效">文字特效</a>
  31.             <a href="#" title="图片特效">图片特效</a>
  32.             <a href="#" title="在线客服">在线客服</a>
  33.             <a href="#" title="瀑布流">瀑布流</a>
  34.             <a href="#" title="网友蘑菇">网友蘑菇</a>
  35.             <canvas ></canvas>

  36.         </div>

  37. </body>
  38. </html>

  39. <script type="text/javascript">
  40.         (function(){
  41.                 var tagsE=document.getElementsByTagName("a"),
  42.                         tags=[],
  43.                         box=document.getElementById("ball"),
  44.                         radius=180,
  45.                         angleX=Math.PI/180,
  46.                         angleY=Math.PI/180,
  47.                         fullLength=300,
  48.                         offsetLeft=box.offsetLeft,
  49.                         offsetTop=box.offsetTop,
  50.                         CX=box.offsetWidth/2,
  51.                         CY=box.offsetHeight/2,
  52.                         animated=false,
  53.                         cvs=document.querySelector("canvas"),
  54.                         ctx=cvs.getContext("2d");

  55.                         cvs.width="600";
  56.                         cvs.height="600";
  57.                         cvs.style.zIndex=tagsE.length/2;

  58.                         function tag(e,x,y,z){
  59.                                 this.e=e;
  60.                                 this.x=x;
  61.                                 this.y=y;
  62.                                 this.z=z;
  63.                         }


  64.                         function initial(){
  65.                                 for(var i=0;i<tagsE.length;i++){
  66.                                         var a=Math.acos((2*(i+1)-1)/tagsE.length - 1);
  67.                                         var b = a*Math.sqrt(tagsE.length*Math.PI);
  68.                                         var x = radius * Math.sin(a) * Math.cos(b);
  69.                         var y = radius * Math.sin(a) * Math.sin(b);
  70.                         var z = radius * Math.cos(a);
  71.                         tags.push(new tag(tagsE[i],x,y,z));

  72.                                 }
  73.                                 tags.forEach(function(e,index,group){

  74.                                         e.move();
  75.                                 });
  76.                         }

  77.                         tag.prototype.move=function(){
  78.                                 var scale=(fullLength+this.z)/fullLength/1.1;
  79.                                 var opacity=(this.z+radius*2)/(radius*2);
  80.                                 this.e.style.fontSize=scale*18+"px";
  81.                                 this.e.style.opacity=opacity;
  82.                                 this.e.style.left=this.x+CX-this.e.offsetWidth/2+"px";
  83.                                 this.e.style.top=this.y+CY-this.e.offsetHeight/2+"px";
  84.                                 this.e.style.zIndex=parseInt(scale*10);
  85.                                
  86.                         }
  87.                         box.onmousemove=function(e){
  88.                                 animated=true;
  89.                                 angleY=-(e.clientY-offsetTop-CY)*0.0002;
  90.                                 angleX=(e.clientX-offsetLeft-CX)*0.0002;
  91.                         };

  92.                         box.onmouseout=function(){
  93.                                 animated=false;
  94.                         }

  95.                         function rotate(){
  96.                                 ca=Math.cos(angleY);
  97.                                 sa=Math.sin(angleY);
  98.                                 cb=Math.cos(angleX);
  99.                                 sb=Math.sin(angleX);
  100.                                
  101.                                 tags.forEach(function(element,index,group){
  102.                                 var rx1=element.x;
  103.                 var ry1=element.y*ca+element.z*(-sa);
  104.                 var rz1=element.y*sa+element.z*ca;

  105.                 var rx2=rx1*cb+rz1*sb;
  106.                 var ry2=ry1;
  107.                 var rz2=rx1*(-sb)+rz1*cb;

  108.                

  109.                 element.x=rx2;
  110.                 element.y=ry2;
  111.                 element.z=rz2;

  112.                     });
  113.                         }

  114.                         function animate(){


  115.                                
  116.                                 rotate();
  117.                                 tags.forEach(function(e,index,group){
  118.                                         e.move();
  119.                                 });
  120.                                 if(!animated){
  121.                                         angleX*=0.98;
  122.                                         angleY*=0.98;
  123.                                 }
  124.                                 drawCanvas();
  125.                                 requestAnimationFrame(animate);
  126.                         }

  127.                         function drawCanvas(){
  128.                                 ctx.clearRect(0,0,CX*2,CY*2);
  129.                                 ctx.strokeStyle="rgba(141,141,141,.6)";
  130.                                
  131.                                 tags.forEach(function(element,index,group){
  132.                                         ctx.beginPath();
  133.                                         ctx.moveTo(CX,CY);
  134.                                         ctx.lineWidth=(element.z+radius*2)/(radius*2);
  135.                                         ctx.lineTo(element.x+CX+parseInt(element.e.offsetWidth)/2,element.y+CY+parseInt(element.e.offsetHeight)/2);
  136.                                         ctx.stroke();

  137.                                 });
  138.                         }

  139.                         initial();
  140.                         animate();

  141.         })();
  142. </script>
复制代码


效果预览:
QQ图片20161103104233.png

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-3-19 11:11

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表