我的博客搭建之标签云的实现

效果图：

以下展示实现这个效果，放到Django项目中，首先后端要穿数据到前端。

后端代码

#views.py

defhome(request):

"""

首页

:paramrequest:

:return:

"""

blogs=Blog.objects.all().order_by('-create_time')

tags=Tag.objects.all()#获取所有的标签

data={

'title':'首页|Hubery的个人博客',

'blogs':blogs,

'tags':tags

}

returnrender(request,'blog/home.html',context=data)

前端代码

#css

/*标签云*/

#tagscloud{

width:250px;

height:260px;

position:relative;

font-size:12px;

color:#333;

margin:20pxauto0;

text-align:center;

}

#tagsclouda{

position:absolute;

top:0px;

left:0px;

color:#333;

font-family:Arial;

text-decoration:none;

margin:010px15px0;

line-height:18px;

text-align:center;

font-size:12px;

padding:1px5px;

display:inline-block;

border-radius:3px;

}

/*标签云显示颜色的种类*/

#tagsclouda.tagc1{background:#666;color:#fff;}

#tagsclouda.tagc2{background:#F16E50;color:#fff;}

#tagsclouda.tagc3{background:#006633;color:#fff;}

#tagsclouda.tagc4{background:#FFB800;color:#fff;}

#tagsclouda.tagc5{background:#5FB878;color:#fff;}

#tagsclouda:hover{color:#fff;background:#0099ff;}#home.html

<divclass="tag_yun""background-color:white;margin-top:20px;padding:10px10px">

<h3><iclass="layui-iconlayui-icon-snowflake""font-size:20px;color:#1b9dec;margin-right:5px"></i>标签云</h3>

<hrclass="layui-bg-black">

<--标签云展示部分--!>

<divid="tagscloud">

{%fortagintags%}

<ahref="{%url'blog:get_tags'%}?tag_id={{tag.id}}">{{tag.name}}&nbsp;({{tag.blog_set.all.count}})</a>

{%endfor%}

</div>

</div>#js文件

//标签云

varradius=90;

vard=200;

vardtr=Math.PI/180;

varmcList=[];

varlasta=1;

varlastb=1;

vardistr=true;

vartspeed=11;

varsize=200;

varmouseX=0;

varmouseY=10;

varhowElliptical=1;

varaA=null;

varoDiv=null;

window.onload=function()

{

vari=0;

varoTag=null;

oDiv=document.getElementById('tagscloud');

aA=oDiv.getElementsByTagName('a');

for(i=0;i<aA.length;i++)

{

oTag={};

aA[i].onmouseover=(function(obj){

returnfunction(){

obj.on=true;

this.style.zIndex=9999;

this.style.color='#fff';

this.style.padding='5px5px';

this.style.filter="alpha(opacity=100)";

this.style.opacity=1;

}

})(oTag);

aA[i].onmouseout=(function(obj){

returnfunction(){

obj.on=false;

this.style.zIndex=obj.zIndex;

this.style.color='#fff';

this.style.padding='5px';

this.style.filter="alpha(opacity="+100*obj.alpha+")";

this.style.opacity=obj.alpha;

this.style.zIndex=obj.zIndex;

}

})(oTag);

oTag.offsetWidth=aA[i].offsetWidth;

oTag.offsetHeight=aA[i].offsetHeight;

mcList.push(oTag);

}

sineCosine(0,0);

positionAll();

(function(){

update();

setTimeout(arguments.callee,40);

})();

};

functionupdate()

{

vara,b,c=0;

a=(Math.min(Math.max(-mouseY,-size),size)/radius)*tspeed;

b=(-Math.min(Math.max(-mouseX,size)/radius)*tspeed;

lasta=a;

lastb=b;

if(Math.abs(a)<=0.01&&Math.abs(b)<=0.01){

return;

}

sineCosine(a,c);

for(vari=0;i<mcList.length;i++){

if(mcList[i].on){

continue;

}

varrx1=mcList[i].cx;

varry1=mcList[i].cy*ca+mcList[i].cz*(-sa);

varrz1=mcList[i].cy*sa+mcList[i].cz*ca;

varrx2=rx1*cb+rz1*sb;

varry2=ry1;

varrz2=rx1*(-sb)+rz1*cb;

varrx3=rx2*cc+ry2*(-sc);

varry3=rx2*sc+ry2*cc;

varrz3=rz2;

mcList[i].cx=rx3;

mcList[i].cy=ry3;

mcList[i].cz=rz3;

per=d/(d+rz3);

mcList[i].x=(howElliptical*rx3*per)-(howElliptical*2);

mcList[i].y=ry3*per;

mcList[i].scale=per;

varalpha=per;

alpha=(alpha-0.6)*(10/6);

mcList[i].alpha=alpha*alpha*alpha-0.2;

mcList[i].zIndex=Math.ceil(100-Math.floor(mcList[i].cz));

}

doPosition();

}

functionpositionAll()

{

varphi=0;

vartheta=0;

varmax=mcList.length;

for(vari=0;i<max;i++){

if(distr){

phi=Math.acos(-1+(2*(i+1)-1)/max);

theta=Math.sqrt(max*Math.PI)*phi;

}else{

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

theta=Math.random()*(2*Math.PI);

}

//坐标变换

mcList[i].cx=radius*Math.cos(theta)*Math.sin(phi);

mcList[i].cy=radius*Math.sin(theta)*Math.sin(phi);

mcList[i].cz=radius*Math.cos(phi);

aA[i].style.left=mcList[i].cx+oDiv.offsetWidth/2-mcList[i].offsetWidth/2+'px';

aA[i].style.top=mcList[i].cy+oDiv.offsetHeight/2-mcList[i].offsetHeight/2+'px';

}

}

functiondoPosition()

{

varl=oDiv.offsetWidth/2;

vart=oDiv.offsetHeight/2;

for(vari=0;i<mcList.length;i++){

if(mcList[i].on){

continue;

}

varaAs=aA[i].style;

if(mcList[i].alpha>0.1){

if(aAs.display!='')

aAs.display='';

}else{

if(aAs.display!='none')

aAs.display='none';

continue;

}

aAs.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';

aAs.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';

//aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';

//aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";

aAs.filter="alpha(opacity="+100*mcList[i].alpha+")";

aAs.zIndex=mcList[i].zIndex;

aAs.opacity=mcList[i].alpha;

}

}

functionsineCosine(a,c)

{

sa=Math.sin(a*dtr);

ca=Math.cos(a*dtr);

sb=Math.sin(b*dtr);

cb=Math.cos(b*dtr);

c=Math.cos(c*dtr);

}

$(function(){

//随机设置颜色的列表

varclass_list=['tagc1','tagc2','tagc3','tagc4','tagc5'];

$('#tagsclouda').each(function(){

$(this).addClass(class_list[parseInt(Math.random()*5)]);

})

});