一分钟教你在博客园中制作自己的动态云球形标签页

转载自[一分钟教你在博客园中制作自己的动态云球形标签页

](https://blog.csdn.net/u013751758/article/details/39832449)

经常看到别人的博客里面有动态的云标签页，感觉很是高大上，自己也很像弄一个。于是去找寻源码，在阿里西西页面特效中找到了云标签的源码，经过分析和解剖，弄成了符合博客园的js.

　　首先，找到博客园页面的管理界面，

　　在其中加入以下代码：

<style type="text/css">
#div1 {position:relative; width:200px; height:150px; margin: 2px auto 0; }
#div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#fff; font-weight:bold; text-decoration:none; padding: 1px 2px; }
#div1 a:hover {border: 1px solid #eee; background: #000; }
#div1 .blue {color:blue;}
#div1 .red {color:red;}
#div1 .yellow {color:yellow;}
#div1 .green {color:green;}
</style>
<script type="text/javascript">

var radius = 60;

var dtr = Math.PI/180;

var d=300;
var mcList = [];

var active = false;

var lasta = 1;

var lastb = 1;

var distr = true;

var tspeed=10;

var size=200;
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</span><span style="color:#000000;">=</span><span style="color:#000000;">document.getElementById(</span><span style="color:#000000;">'</span><span style="color:#000000;">div1</span><span style="color:#000000;">'</span><span style="color:#000000;">);

aA</span><span style="color:#000000;">=</span><span style="color:#000000;">oDiv.getElementsByTagName(</span><span style="color:#000000;">'</span><span style="color:#000000;">a</span><span style="color:#000000;">'</span><span style="color:#000000;">);

</span><span>for</span><span style="color:#000000;">(i</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;i</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">aA.length;i</span><span style="color:#000000;">++</span><span style="color:#000000;">)
{
    oTag</span><span style="color:#000000;">=</span><span style="color:#000000;">{};
    
    oTag.offsetWidth</span><span style="color:#000000;">=</span><span style="color:#000000;">aA[i].offsetWidth;
    oTag.offsetHeight</span><span style="color:#000000;">=</span><span style="color:#000000;">aA[i].offsetHeight;
    
    mcList.push(oTag);
}

sineCosine( </span><span style="color:#000000;">0</span><span style="color:#000000;">,</span><span style="color:#000000;">0</span><span style="color:#000000;">,</span><span style="color:#000000;">0</span><span style="color:#000000;"> );

positionAll();

oDiv.onmouseover</span><span style="color:#000000;">=</span><span>function</span><span style="color:#000000;"> ()
{
    active</span><span style="color:#000000;">=</span><span>true</span><span style="color:#000000;">;
};

oDiv.onmouseout</span><span style="color:#000000;">=</span><span>function</span><span style="color:#000000;"> ()
{
    active</span><span style="color:#000000;">=</span><span>false</span><span style="color:#000000;">;
};

oDiv.onmousemove</span><span style="color:#000000;">=</span><span>function</span><span style="color:#000000;"> (ev)
{
    </span><span>var</span><span style="color:#000000;"> oEvent</span><span style="color:#000000;">=</span><span style="color:#000000;">window.event </span><span style="color:#000000;">||</span><span style="color:#000000;"> ev;
    
    mouseX</span><span style="color:#000000;">=</span><span style="color:#000000;">oEvent.clientX</span><span style="color:#000000;">-</span><span style="color:#000000;">(oDiv.offsetLeft</span><span style="color:#000000;">+</span><span style="color:#000000;">oDiv.offsetWidth</span><span style="color:#000000;">/</span><span style="color:#000000;">2);</span>

        mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);



mouseX/=5;

        mouseY/=5;

    };
setInterval(update, </span><span style="color:#000000;">30</span><span style="color:#000000;">);

};
function update()

{

var a;

var b;
</span><span>if</span><span style="color:#000000;">(active)
{
    a </span><span style="color:#000000;">=</span><span style="color:#000000;"> (</span><span style="color:#000000;">-</span><span style="color:#000000;">Math.min( Math.max( </span><span style="color:#000000;">-</span><span style="color:#000000;">mouseY, </span><span style="color:#000000;">-</span><span style="color:#000000;">size ), size ) </span><span style="color:#000000;">/</span><span style="color:#000000;"> radius ) </span><span style="color:#000000;">*</span><span style="color:#000000;"> tspeed;
    b </span><span style="color:#000000;">=</span><span style="color:#000000;"> (Math.min( Math.max( </span><span style="color:#000000;">-</span><span style="color:#000000;">mouseX, </span><span style="color:#000000;">-</span><span style="color:#000000;">size ), size ) </span><span style="color:#000000;">/</span><span style="color:#000000;"> radius ) </span><span style="color:#000000;">*</span><span style="color:#000000;"> tspeed;
}
</span><span>else</span><span style="color:#000000;">
{
    a </span><span style="color:#000000;">=</span><span style="color:#000000;"> lasta </span><span style="color:#000000;">*</span> <span style="color:#000000;">0.98</span><span style="color:#000000;">;
    b </span><span style="color:#000000;">=</span><span style="color:#000000;"> lastb </span><span style="color:#000000;">*</span> <span style="color:#000000;">0.98</span><span style="color:#000000;">;
}

lasta</span><span style="color:#000000;">=</span><span style="color:#000000;">a;
lastb</span><span style="color:#000000;">=</span><span style="color:#000000;">b;

</span><span>if</span><span style="color:#000000;">(Math.abs(a)</span><span style="color:#000000;">&lt;=</span><span style="color:#000000;">0.01</span> <span style="color:#000000;">&amp;&amp;</span><span style="color:#000000;"> Math.abs(b)</span><span style="color:#000000;">&lt;=</span><span style="color:#000000;">0.01</span><span style="color:#000000;">)
{
    </span><span>return</span><span style="color:#000000;">;
}

</span><span>var</span><span style="color:#000000;"> c</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;
sineCosine(a,b,c);
</span><span>for</span><span style="color:#000000;">(</span><span>var</span><span style="color:#000000;"> j</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;j</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">mcList.length;j</span><span style="color:#000000;">++</span><span style="color:#000000;">)
{
    </span><span>var</span><span style="color:#000000;"> rx1</span><span style="color:#000000;">=</span><span style="color:#000000;">mcList[j].cx;
    </span><span>var</span><span style="color:#000000;"> ry1</span><span style="color:#000000;">=</span><span style="color:#000000;">mcList[j].cy</span><span style="color:#000000;">*</span><span style="color:#000000;">ca</span><span style="color:#000000;">+</span><span style="color:#000000;">mcList[j].cz</span><span style="color:#000000;">*</span><span style="color:#000000;">(</span><span style="color:#000000;">-</span><span style="color:#000000;">sa);
    </span><span>var</span><span style="color:#000000;"> rz1</span><span style="color:#000000;">=</span><span style="color:#000000;">mcList[j].cy</span><span style="color:#000000;">*</span><span style="color:#000000;">sa</span><span style="color:#000000;">+</span><span style="color:#000000;">mcList[j].cz</span><span style="color:#000000;">*</span><span style="color:#000000;">ca;
    
    </span><span>var</span><span style="color:#000000;"> rx2</span><span style="color:#000000;">=</span><span style="color:#000000;">rx1</span><span style="color:#000000;">*</span><span style="color:#000000;">cb</span><span style="color:#000000;">+</span><span style="color:#000000;">rz1</span><span style="color:#000000;">*</span><span style="color:#000000;">sb;
    </span><span>var</span><span style="color:#000000;"> ry2</span><span style="color:#000000;">=</span><span style="color:#000000;">ry1;
    </span><span>var</span><span style="color:#000000;"> rz2</span><span style="color:#000000;">=</span><span style="color:#000000;">rx1</span><span style="color:#000000;">*</span><span style="color:#000000;">(</span><span style="color:#000000;">-</span><span style="color:#000000;">sb)</span><span style="color:#000000;">+</span><span style="color:#000000;">rz1</span><span style="color:#000000;">*</span><span style="color:#000000;">cb;
    
    </span><span>var</span><span style="color:#000000;"> rx3</span><span style="color:#000000;">=</span><span style="color:#000000;">rx2</span><span style="color:#000000;">*</span><span style="color:#000000;">cc</span><span style="color:#000000;">+</span><span style="color:#000000;">ry2</span><span style="color:#000000;">*</span><span style="color:#000000;">(</span><span style="color:#000000;">-</span><span style="color:#000000;">sc);
    </span><span>var</span><span style="color:#000000;"> ry3</span><span style="color:#000000;">=</span><span style="color:#000000;">rx2</span><span style="color:#000000;">*</span><span style="color:#000000;">sc</span><span style="color:#000000;">+</span><span style="color:#000000;">ry2</span><span style="color:#000000;">*</span><span style="color:#000000;">cc;
    </span><span>var</span><span style="color:#000000;"> rz3</span><span style="color:#000000;">=</span><span style="color:#000000;">rz2;
    
    mcList[j].cx</span><span style="color:#000000;">=</span><span style="color:#000000;">rx3;
    mcList[j].cy</span><span style="color:#000000;">=</span><span style="color:#000000;">ry3;
    mcList[j].cz</span><span style="color:#000000;">=</span><span style="color:#000000;">rz3;
    
    per</span><span style="color:#000000;">=</span><span style="color:#000000;">d</span><span style="color:#000000;">/</span><span style="color:#000000;">(d+rz3);</span>

        
        mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);
        mcList[j].y=ry3*per;
        mcList[j].scale=per;
        mcList[j].alpha=per;
    mcList[j].alpha</span><span style="color:#000000;">=</span><span style="color:#000000;">(mcList[j].alpha</span><span style="color:#000000;">-</span><span style="color:#000000;">0.6</span><span style="color:#000000;">)</span><span style="color:#000000;">*</span><span style="color:#000000;">(</span><span style="color:#000000;">10</span><span style="color:#000000;">/</span><span style="color:#000000;">6);</span>

    }
doPosition();
depthSort();

}
function depthSort()

{

var i=0;

var aTmp=[];
</span><span>for</span><span style="color:#000000;">(i</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;i</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">aA.length;i</span><span style="color:#000000;">++</span><span style="color:#000000;">)
{
    aTmp.push(aA[i]);
}

aTmp.sort
(
    </span><span>function</span><span style="color:#000000;"> (vItem1, vItem2)
    {
        </span><span>if</span><span style="color:#000000;">(vItem1.cz</span><span style="color:#000000;">&gt;</span><span style="color:#000000;">vItem2.cz)
        {
            </span><span>return</span> <span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">;
        }
        </span><span>else</span> <span>if</span><span style="color:#000000;">(vItem1.cz</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">vItem2.cz)
        {
            </span><span>return</span> <span style="color:#000000;">1</span><span style="color:#000000;">;
        }
        </span><span>else</span><span style="color:#000000;">
        {
            </span><span>return</span> <span style="color:#000000;">0</span><span style="color:#000000;">;
        }
    }
);

</span><span>for</span><span style="color:#000000;">(i</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;i</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">aTmp.length;i</span><span style="color:#000000;">++</span><span style="color:#000000;">)
{
    aTmp[i].style.zIndex</span><span style="color:#000000;">=</span><span style="color:#000000;">i;
}

}
function positionAll()

{

var phi=0;

var theta=0;

var max=mcList.length;

var i=0;
</span><span>var</span><span style="color:#000000;"> aTmp</span><span style="color:#000000;">=</span><span style="color:#000000;">[];
</span><span>var</span><span style="color:#000000;"> oFragment</span><span style="color:#000000;">=</span><span style="color:#000000;">document.createDocumentFragment();

</span><span>//</span><span>随机排序</span>
<span>for</span><span style="color:#000000;">(i</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;i</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">aA.length;i</span><span style="color:#000000;">++</span><span style="color:#000000;">)
{
    aTmp.push(aA[i]);
}

aTmp.sort
(
    </span><span>function</span><span style="color:#000000;"> ()
    {
        </span><span>return</span><span style="color:#000000;"> Math.random()</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">0.5</span><span style="color:#000000;">?</span><span style="color:#000000;">1</span><span style="color:#000000;">:</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">;
    }
);

</span><span>for</span><span style="color:#000000;">(i</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;i</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">aTmp.length;i</span><span style="color:#000000;">++</span><span style="color:#000000;">)
{
    oFragment.appendChild(aTmp[i]);
}

oDiv.appendChild(oFragment);

</span><span>for</span><span style="color:#000000;">( </span><span>var</span><span style="color:#000000;"> i</span><span style="color:#000000;">=</span><span style="color:#000000;">1</span><span style="color:#000000;">; i</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">max</span><span style="color:#000000;">+</span><span style="color:#000000;">1</span><span style="color:#000000;">; i</span><span style="color:#000000;">++</span><span style="color:#000000;">){
    </span><span>if</span><span style="color:#000000;">( distr )
    {
        phi </span><span style="color:#000000;">=</span><span style="color:#000000;"> Math.acos(</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">+</span><span style="color:#000000;">(</span><span style="color:#000000;">2</span><span style="color:#000000;">*</span><span style="color:#000000;">i</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">)</span><span style="color:#000000;">/</span><span style="color:#000000;">max);</span>

            theta = Math.sqrt(maxMath.PI)phi;

}

else

{

phi = Math.random()(Math.PI);

theta = Math.random()(2Math.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</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">].style.left</span><span style="color:#000000;">=</span><span style="color:#000000;">mcList[i</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">].cx</span><span style="color:#000000;">+</span><span style="color:#000000;">oDiv.offsetWidth</span><span style="color:#000000;">/</span><span style="color:#000000;">2-mcList[i-1].offsetWidth</span><span style="color:#000000;">/</span><span style="color:#000000;">2</span><span style="color:#000000;">+</span><span style="color:#000000;">'</span><span style="color:#000000;">px</span><span style="color:#000000;">'</span><span style="color:#000000;">;
    aA[i</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">].style.top</span><span style="color:#000000;">=</span><span style="color:#000000;">mcList[i</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">].cy</span><span style="color:#000000;">+</span><span style="color:#000000;">oDiv.offsetHeight</span><span style="color:#000000;">/</span><span style="color:#000000;">2-mcList[i-1].offsetHeight</span><span style="color:#000000;">/</span><span style="color:#000000;">2</span><span style="color:#000000;">+</span><span style="color:#000000;">'</span><span style="color:#000000;">px</span><span style="color:#000000;">'</span><span style="color:#000000;">;
}

}
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(12mcList[i].scale/2)+8+'px';



aA[i].style.filter="alpha(opacity="+100mcList[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>
<font face="Comic Sans MS"><strong><a href="http://weibo.com/u/3209909971/home?wvr=5&lf=reg">我的标签</a>

</strong></font><hr />

<div id="div1">

<a href="http://www.cnblogs.com/xing901022/p/3694709.html"class="blue">2014</a>

<a href="http://www.cnblogs.com/xing901022/p/3248913.html"class="red">2013下</a>

<a href="http://www.cnblogs.com/xing901022/archive/2013/01/18/2857982.html" class="red">2013上</a>

<a href="http://www.cnblogs.com/xing901022/archive/2012/10/19/2699162.html" class="red">2012下</a>

<a href="http://zh.linuxvirtualserver.org/" class="green">LVS中文</a>

<a href="http://code.taobao.org/" class="green">开源</a>

<a href="http://www.cnblogs.com/xing901022/archive/2013/04/09/3248870.html" class="blue">反向代理</a>

<a href="http://www.cnblogs.com/xing901022/p/3248469.html" class="blue">CUDA</a>

</div>

代码分析

　　以上源码，就可以直接在你的博客园ID上面显示云标签了

　　那么我们分析以下，上面的代码：

　　这个部分的代码，应该是直接嵌入到body里面的，所以引用的css js都要加入标签，下面是css的代码：

<style type="text/css">
#div1 {position:relative; width:200px; height:150px; margin: 2px auto 0; }
#div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#fff; font-weight:bold; text-decoration:none; padding: 1px 2px; }
#div1 a:hover {border: 1px solid #eee; background: #000; }
#div1 .blue {color:blue;}
#div1 .red {color:red;}
#div1 .yellow {color:yellow;}
#div1 .green {color:green;}
</style>

　　这里面的div是我们下面将要用到的标签内容div的id，通过这个id就可以引用到这里面的样式。

　　上面最重要的一个参数

#div1 {position:relative; width:200px; height:150px; margin: 2px auto 0; }

　　这段代码定义了云标签插件div的宽度和高度，调整适当的像素值，适应你的博客即可。

　　下面是js的代码，radius定义了云标签的半径，可以通过设置该值，调整云标签的旋转半径，也就是球形的大小

<script type="text/javascript">
var radius = 60;
var dtr = Math.PI/180;
var d=300;
var mcList = [];

var active = false;

var lasta = 1;

var lastb = 1;

var distr = true;

var tspeed=10;

var size=200;
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</span><span style="color:#000000;">=</span><span style="color:#000000;">document.getElementById(</span><span style="color:#000000;">'</span><span style="color:#000000;">div1</span><span style="color:#000000;">'</span><span style="color:#000000;">);

aA</span><span style="color:#000000;">=</span><span style="color:#000000;">oDiv.getElementsByTagName(</span><span style="color:#000000;">'</span><span style="color:#000000;">a</span><span style="color:#000000;">'</span><span style="color:#000000;">);

</span><span>for</span><span style="color:#000000;">(i</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;i</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">aA.length;i</span><span style="color:#000000;">++</span><span style="color:#000000;">)
{
    oTag</span><span style="color:#000000;">=</span><span style="color:#000000;">{};
    
    oTag.offsetWidth</span><span style="color:#000000;">=</span><span style="color:#000000;">aA[i].offsetWidth;
    oTag.offsetHeight</span><span style="color:#000000;">=</span><span style="color:#000000;">aA[i].offsetHeight;
    
    mcList.push(oTag);
}

sineCosine( </span><span style="color:#000000;">0</span><span style="color:#000000;">,</span><span style="color:#000000;">0</span><span style="color:#000000;">,</span><span style="color:#000000;">0</span><span style="color:#000000;"> );

positionAll();

oDiv.onmouseover</span><span style="color:#000000;">=</span><span>function</span><span style="color:#000000;"> ()
{
    active</span><span style="color:#000000;">=</span><span>true</span><span style="color:#000000;">;
};

oDiv.onmouseout</span><span style="color:#000000;">=</span><span>function</span><span style="color:#000000;"> ()
{
    active</span><span style="color:#000000;">=</span><span>false</span><span style="color:#000000;">;
};

oDiv.onmousemove</span><span style="color:#000000;">=</span><span>function</span><span style="color:#000000;"> (ev)
{
    </span><span>var</span><span style="color:#000000;"> oEvent</span><span style="color:#000000;">=</span><span style="color:#000000;">window.event </span><span style="color:#000000;">||</span><span style="color:#000000;"> ev;
    
    mouseX</span><span style="color:#000000;">=</span><span style="color:#000000;">oEvent.clientX</span><span style="color:#000000;">-</span><span style="color:#000000;">(oDiv.offsetLeft</span><span style="color:#000000;">+</span><span style="color:#000000;">oDiv.offsetWidth</span><span style="color:#000000;">/</span><span style="color:#000000;">2);</span>

        mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);



mouseX/=5;

        mouseY/=5;

    };
setInterval(update, </span><span style="color:#000000;">30</span><span style="color:#000000;">);

};
function update()

{

var a;

var b;
</span><span>if</span><span style="color:#000000;">(active)
{
    a </span><span style="color:#000000;">=</span><span style="color:#000000;"> (</span><span style="color:#000000;">-</span><span style="color:#000000;">Math.min( Math.max( </span><span style="color:#000000;">-</span><span style="color:#000000;">mouseY, </span><span style="color:#000000;">-</span><span style="color:#000000;">size ), size ) </span><span style="color:#000000;">/</span><span style="color:#000000;"> radius ) </span><span style="color:#000000;">*</span><span style="color:#000000;"> tspeed;
    b </span><span style="color:#000000;">=</span><span style="color:#000000;"> (Math.min( Math.max( </span><span style="color:#000000;">-</span><span style="color:#000000;">mouseX, </span><span style="color:#000000;">-</span><span style="color:#000000;">size ), size ) </span><span style="color:#000000;">/</span><span style="color:#000000;"> radius ) </span><span style="color:#000000;">*</span><span style="color:#000000;"> tspeed;
}
</span><span>else</span><span style="color:#000000;">
{
    a </span><span style="color:#000000;">=</span><span style="color:#000000;"> lasta </span><span style="color:#000000;">*</span> <span style="color:#000000;">0.98</span><span style="color:#000000;">;
    b </span><span style="color:#000000;">=</span><span style="color:#000000;"> lastb </span><span style="color:#000000;">*</span> <span style="color:#000000;">0.98</span><span style="color:#000000;">;
}

lasta</span><span style="color:#000000;">=</span><span style="color:#000000;">a;
lastb</span><span style="color:#000000;">=</span><span style="color:#000000;">b;

</span><span>if</span><span style="color:#000000;">(Math.abs(a)</span><span style="color:#000000;">&lt;=</span><span style="color:#000000;">0.01</span> <span style="color:#000000;">&amp;&amp;</span><span style="color:#000000;"> Math.abs(b)</span><span style="color:#000000;">&lt;=</span><span style="color:#000000;">0.01</span><span style="color:#000000;">)
{
    </span><span>return</span><span style="color:#000000;">;
}

</span><span>var</span><span style="color:#000000;"> c</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;
sineCosine(a,b,c);
</span><span>for</span><span style="color:#000000;">(</span><span>var</span><span style="color:#000000;"> j</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;j</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">mcList.length;j</span><span style="color:#000000;">++</span><span style="color:#000000;">)
{
    </span><span>var</span><span style="color:#000000;"> rx1</span><span style="color:#000000;">=</span><span style="color:#000000;">mcList[j].cx;
    </span><span>var</span><span style="color:#000000;"> ry1</span><span style="color:#000000;">=</span><span style="color:#000000;">mcList[j].cy</span><span style="color:#000000;">*</span><span style="color:#000000;">ca</span><span style="color:#000000;">+</span><span style="color:#000000;">mcList[j].cz</span><span style="color:#000000;">*</span><span style="color:#000000;">(</span><span style="color:#000000;">-</span><span style="color:#000000;">sa);
    </span><span>var</span><span style="color:#000000;"> rz1</span><span style="color:#000000;">=</span><span style="color:#000000;">mcList[j].cy</span><span style="color:#000000;">*</span><span style="color:#000000;">sa</span><span style="color:#000000;">+</span><span style="color:#000000;">mcList[j].cz</span><span style="color:#000000;">*</span><span style="color:#000000;">ca;
    
    </span><span>var</span><span style="color:#000000;"> rx2</span><span style="color:#000000;">=</span><span style="color:#000000;">rx1</span><span style="color:#000000;">*</span><span style="color:#000000;">cb</span><span style="color:#000000;">+</span><span style="color:#000000;">rz1</span><span style="color:#000000;">*</span><span style="color:#000000;">sb;
    </span><span>var</span><span style="color:#000000;"> ry2</span><span style="color:#000000;">=</span><span style="color:#000000;">ry1;
    </span><span>var</span><span style="color:#000000;"> rz2</span><span style="color:#000000;">=</span><span style="color:#000000;">rx1</span><span style="color:#000000;">*</span><span style="color:#000000;">(</span><span style="color:#000000;">-</span><span style="color:#000000;">sb)</span><span style="color:#000000;">+</span><span style="color:#000000;">rz1</span><span style="color:#000000;">*</span><span style="color:#000000;">cb;
    
    </span><span>var</span><span style="color:#000000;"> rx3</span><span style="color:#000000;">=</span><span style="color:#000000;">rx2</span><span style="color:#000000;">*</span><span style="color:#000000;">cc</span><span style="color:#000000;">+</span><span style="color:#000000;">ry2</span><span style="color:#000000;">*</span><span style="color:#000000;">(</span><span style="color:#000000;">-</span><span style="color:#000000;">sc);
    </span><span>var</span><span style="color:#000000;"> ry3</span><span style="color:#000000;">=</span><span style="color:#000000;">rx2</span><span style="color:#000000;">*</span><span style="color:#000000;">sc</span><span style="color:#000000;">+</span><span style="color:#000000;">ry2</span><span style="color:#000000;">*</span><span style="color:#000000;">cc;
    </span><span>var</span><span style="color:#000000;"> rz3</span><span style="color:#000000;">=</span><span style="color:#000000;">rz2;
    
    mcList[j].cx</span><span style="color:#000000;">=</span><span style="color:#000000;">rx3;
    mcList[j].cy</span><span style="color:#000000;">=</span><span style="color:#000000;">ry3;
    mcList[j].cz</span><span style="color:#000000;">=</span><span style="color:#000000;">rz3;
    
    per</span><span style="color:#000000;">=</span><span style="color:#000000;">d</span><span style="color:#000000;">/</span><span style="color:#000000;">(d+rz3);</span>

        
        mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);
        mcList[j].y=ry3*per;
        mcList[j].scale=per;
        mcList[j].alpha=per;
    mcList[j].alpha</span><span style="color:#000000;">=</span><span style="color:#000000;">(mcList[j].alpha</span><span style="color:#000000;">-</span><span style="color:#000000;">0.6</span><span style="color:#000000;">)</span><span style="color:#000000;">*</span><span style="color:#000000;">(</span><span style="color:#000000;">10</span><span style="color:#000000;">/</span><span style="color:#000000;">6);</span>

    }
doPosition();
depthSort();

}
function depthSort()

{

var i=0;

var aTmp=[];
</span><span>for</span><span style="color:#000000;">(i</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;i</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">aA.length;i</span><span style="color:#000000;">++</span><span style="color:#000000;">)
{
    aTmp.push(aA[i]);
}

aTmp.sort
(
    </span><span>function</span><span style="color:#000000;"> (vItem1, vItem2)
    {
        </span><span>if</span><span style="color:#000000;">(vItem1.cz</span><span style="color:#000000;">&gt;</span><span style="color:#000000;">vItem2.cz)
        {
            </span><span>return</span> <span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">;
        }
        </span><span>else</span> <span>if</span><span style="color:#000000;">(vItem1.cz</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">vItem2.cz)
        {
            </span><span>return</span> <span style="color:#000000;">1</span><span style="color:#000000;">;
        }
        </span><span>else</span><span style="color:#000000;">
        {
            </span><span>return</span> <span style="color:#000000;">0</span><span style="color:#000000;">;
        }
    }
);

</span><span>for</span><span style="color:#000000;">(i</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;i</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">aTmp.length;i</span><span style="color:#000000;">++</span><span style="color:#000000;">)
{
    aTmp[i].style.zIndex</span><span style="color:#000000;">=</span><span style="color:#000000;">i;
}

}
function positionAll()

{

var phi=0;

var theta=0;

var max=mcList.length;

var i=0;
</span><span>var</span><span style="color:#000000;"> aTmp</span><span style="color:#000000;">=</span><span style="color:#000000;">[];
</span><span>var</span><span style="color:#000000;"> oFragment</span><span style="color:#000000;">=</span><span style="color:#000000;">document.createDocumentFragment();

</span><span>//</span><span>随机排序</span>
<span>for</span><span style="color:#000000;">(i</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;i</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">aA.length;i</span><span style="color:#000000;">++</span><span style="color:#000000;">)
{
    aTmp.push(aA[i]);
}

aTmp.sort
(
    </span><span>function</span><span style="color:#000000;"> ()
    {
        </span><span>return</span><span style="color:#000000;"> Math.random()</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">0.5</span><span style="color:#000000;">?</span><span style="color:#000000;">1</span><span style="color:#000000;">:</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">;
    }
);

</span><span>for</span><span style="color:#000000;">(i</span><span style="color:#000000;">=</span><span style="color:#000000;">0</span><span style="color:#000000;">;i</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">aTmp.length;i</span><span style="color:#000000;">++</span><span style="color:#000000;">)
{
    oFragment.appendChild(aTmp[i]);
}

oDiv.appendChild(oFragment);

</span><span>for</span><span style="color:#000000;">( </span><span>var</span><span style="color:#000000;"> i</span><span style="color:#000000;">=</span><span style="color:#000000;">1</span><span style="color:#000000;">; i</span><span style="color:#000000;">&lt;</span><span style="color:#000000;">max</span><span style="color:#000000;">+</span><span style="color:#000000;">1</span><span style="color:#000000;">; i</span><span style="color:#000000;">++</span><span style="color:#000000;">){
    </span><span>if</span><span style="color:#000000;">( distr )
    {
        phi </span><span style="color:#000000;">=</span><span style="color:#000000;"> Math.acos(</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">+</span><span style="color:#000000;">(</span><span style="color:#000000;">2</span><span style="color:#000000;">*</span><span style="color:#000000;">i</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">)</span><span style="color:#000000;">/</span><span style="color:#000000;">max);</span>

            theta = Math.sqrt(maxMath.PI)phi;

}

else

{

phi = Math.random()(Math.PI);

theta = Math.random()(2Math.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</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">].style.left</span><span style="color:#000000;">=</span><span style="color:#000000;">mcList[i</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">].cx</span><span style="color:#000000;">+</span><span style="color:#000000;">oDiv.offsetWidth</span><span style="color:#000000;">/</span><span style="color:#000000;">2-mcList[i-1].offsetWidth</span><span style="color:#000000;">/</span><span style="color:#000000;">2</span><span style="color:#000000;">+</span><span style="color:#000000;">'</span><span style="color:#000000;">px</span><span style="color:#000000;">'</span><span style="color:#000000;">;
    aA[i</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">].style.top</span><span style="color:#000000;">=</span><span style="color:#000000;">mcList[i</span><span style="color:#000000;">-</span><span style="color:#000000;">1</span><span style="color:#000000;">].cy</span><span style="color:#000000;">+</span><span style="color:#000000;">oDiv.offsetHeight</span><span style="color:#000000;">/</span><span style="color:#000000;">2-mcList[i-1].offsetHeight</span><span style="color:#000000;">/</span><span style="color:#000000;">2</span><span style="color:#000000;">+</span><span style="color:#000000;">'</span><span style="color:#000000;">px</span><span style="color:#000000;">'</span><span style="color:#000000;">;
}

}
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(12mcList[i].scale/2)+8+'px';



aA[i].style.filter="alpha(opacity="+100mcList[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>

　　最后添加自己的云标签内容，即可，后面的class会调用上面css定义的样式，如果没有自己喜欢的颜色或者样式，自己定义就行了。

<div id="div1">
    <a href="http://www.cnblogs.com/xing901022/p/3694709.html"class="blue">2014</a>
    <a href="http://www.cnblogs.com/xing901022/p/3248913.html"class="red">2013下</a>
    <a href="http://www.cnblogs.com/xing901022/archive/2013/01/18/2857982.html" class="red">2013上</a>
    <a href="http://www.cnblogs.com/xing901022/archive/2012/10/19/2699162.html" class="red">2012下</a>
    <a href="http://zh.linuxvirtualserver.org/" class="green">LVS中文</a>
    <a href="http://code.taobao.org/" class="green">开源</a>
    <a href="http://www.cnblogs.com/xing901022/archive/2013/04/09/3248870.html" class="blue">反向代理</a>
    <a href="http://www.cnblogs.com/xing901022/p/3248469.html" class="blue">CUDA</a>
</div>