3D旋转标签云
一定要先做下广告，衷心希望大家浏览博客的同时，可以点一下“ 赞助商 ” ，这个机构真的很棒，受疫情影响，原本的大机构为生源所困，我希望同样热爱前端，或者有兴趣向前端发展的朋友，可以了解一下这家机构。我不是学院的招生老师，但大家可以咨询我学院方面的问题，博主不图名利，如果入校学习，我肯定会想办法让机构给你最大的优惠。
“百闻不如一见”，我讲再多都不如你来问一问看一看。
CSS代码较少，用了200行JS脚本驱动，给自定义转速、半径、缩放添加了注释，方便博友自行修改。本页面部分代码取自“ 源码之家 ”，前端学习不是一蹴而就，必须有丰富的日常积累才能有所提升，我不是最饱读诗书的那个，但我敏而好学，不耻下问。真心希望大家都能学有所成，也希望大家能经常阅读我的文章，给我一点点支持，我可能会拖更，但不会断更。我热爱前端就像热爱自己，我更专注于动画制作，想寻找有同样兴趣的博友，共同进步。
上源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签云</title>
<style type="text/css">
#tagbox {
position: relative;
margin: 20px auto 0px;
width: 500px;
height: 500px;
background-image: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=444462001,2967968230&fm=11&gp=0.jpg);
}
#tagbox .img img{
width: 70px;
}
#tagbox a,#tagbox .img img{
position: absolute;
padding: 3px 6px;
font-family: Microsoft YaHei;
color: #fff;
TOP: 0px;
font-weight: bold;
text-decoration: none;
left: 0px
}
#tagbox a:hover{
border: #eee 1px solid;
background: #000;
}
#tagbox .blue {
color: blue
}
#tagbox .red {
color: red
}
#tagbox .yellow {
color: yellow
}
</style>
</head>
<body>
<div id="tagbox">
<a class="yellow" href="#">前端</a>
<a class="blue" href="#">Vue</a>
<a class="red" href="#">ajax</a>
<a class="img" href="#">
<img src="gexiangxiang.png" alt="" />
</a>
<a href="#">Jquery</a>
<a href="#">脚手架</a>
<a class="blue" href="#">CSS</a>
<a href="#">我不是费圆</a>
<a class="red" href="#"></a>
<a class="yellow" href="#">韩媒</a>
<a href="#">丽人</a>
<a class="red" href="#">搞笑</a>
<a href="#">感人</a>
<a class="blue" href="#">壁纸</a>
<a class="blue" href="#">古装</a>
<a class="red" href="#">言情</a>
<a class="yellow" href="#">浪漫</a>
<a class="yellow" href="#">耽美</a>
<a class="blue" href="#">爆笑</a>
<a class="yellow" href="#">挑眉</a>
<a class="blue" href="#">同人</a>
<a class="blue" href="#">武侠</a>
<a class="red" href="#">魔幻</a>
<a href="#">教案</a>
<a href="#">论文</a>
<a class="yellow" href="#">妩媚</a>
<a href="#">青丝</a>
<a href="#">带货</a>
<a class="blue" href="#">科幻</a>
<a class="red" href="#">恐怖</a>
<a class="red" href="#">星星</a>
<a class="blue" href="#">下载</a>
<a href="#">音乐</a>
<a class="blue" href="#">游戏</a>
<a class="blue" href="#">CG资源</a>
<a class="yellow" href="#">运势</a>
<a href="#">课件</a>
<a href="#">幽默</a>
<a class="red" href="#">学霸</a>
<a class="green" href="#">雅思</a>
<a href="#">名校</a>
<a class="red" href="#">赚钱</a>
<a class="yellow" href="#">干货</a>
<a class="yellow" href="#">香醇</a>
<a class="yellow" href="#">云电脑</a>
</div>
</body>
<script>
var radius = 180; //牵涉到半径
var dtr = Math.PI/180;//旋转的快慢
var d=250; //字体缩放
var mcList = [];
var active = false;
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed=5;
var size=250;
var mouseX=0;
var mouseY=0;
var howElliptical=1;
var aA=null;
var oDiv=null;
window.onload=function (){
var i=0;
var oTag=null;
oDiv=document.getElementById('tagbox');
aA=oDiv.getElementsByTagName('a');
for(i=0;i<aA.length;i++){
oTag={};
oTag.offsetWidth=aA[i].offsetWidth;
oTag.offsetHeight=aA[i].offsetHeight;
mcList.push(oTag);
}
sineCosine( 0,0,0 );
positionAll();
oDiv.onmouseover=function ()
{
active=true;
};
oDiv.onmouseout=function ()
{
active=false;
};
oDiv.onmousemove=function (ev){
var oEvent=window.event || ev;
mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);
mouseX/=5;
mouseY/=5;
};
setInterval(update, 30);
};
function update(){
var a;
var b;
if(active)
{
a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;
b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;
}
else
{
a = lasta * 0.98;
b = lastb * 0.98;
}
lasta=a;
lastb=b;
if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
{
return;
}
var c=0;
sineCosine(a,b,c);
for(var j=0;j<mcList.length;j++){
var rx1=mcList[j].cx;
var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa);
var rz1=mcList[j].cy*sa+mcList[j].cz*ca;
var rx2=rx1*cb+rz1*sb;
var ry2=ry1;
var rz2=rx1*(-sb)+rz1*cb;
var rx3=rx2*cc+ry2*(-sc);
var ry3=rx2*sc+ry2*cc;
var rz3=rz2;
mcList[j].cx=rx3;
mcList[j].cy=ry3;
mcList[j].cz=rz3;
per=d/(d+rz3);
mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);
mcList[j].y=ry3*per;
mcList[j].scale=per;
mcList[j].alpha=per;
mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);
}
doPosition();
depthSort();
}
function depthSort(){
var i=0;
var aTmp=[];
for(i=0;i<aA.length;i++)
{
aTmp.push(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;
}
}
function positionAll(){
var phi=0;
var theta=0;
var max=mcList.length;
var i=0;
var aTmp=[];
var oFragment=document.createDocumentFragment();
//Ëæ»úÅÅÐò
for(i=0;i<aA.length;i++){
aTmp.push(aA[i]);
}
aTmp.sort
(
function ()
{
return Math.random()<0.5?1:-1;
}
);
for(i=0;i<aTmp.length;i++){
oFragment.appendChild(aTmp[i]);
}
oDiv.appendChild(oFragment);
for( var i=1; i<max+1; i++){
if( 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);
}
//×ø±ê±ä»»
mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);
mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);
mcList[i-1].cz = radius * Math.cos(phi);
aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';
aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';
}
}
function doPosition(){
var l=oDiv.offsetWidth/2;
var t=oDiv.offsetHeight/2;
for(var i=0;i<mcList.length;i++)
{
aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';
aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';
aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";
aA[i].style.opacity=mcList[i].alpha;
}
}
function sineCosine( a, b, c){
sa = Math.sin(a * dtr);
ca = Math.cos(a * dtr);
sb = Math.sin(b * dtr);
cb = Math.cos(b * dtr);
sc = Math.sin(c * dtr);
cc = Math.cos(c * dtr);
}
</script>
</html>
代码开源，但需要有一定JS语音基础方可阅读。我明白“ 授人以鱼不如授人以渔 ”的道理，所以代码中常常只留下自定义注释，方便大家修改，但不能凭此参透其中的奥妙，我并没有藏拙，好学的人自然会想办法寻找答案，自学也是人生的一门必修课。
请点击赞助，了解更多内容：
河南奇酷
推荐阅读以下内容：