js implémentation simple de l'effet de nuage de tags compétences example

js implémentation simple de l'effet de nuage de tags compétences example_javascript

WBOY

Libérer： 2016-05-16 15:46:52

original

1162 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter simplement l'effet de nuage de tags à l'aide de js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Le nuage de balises JavaScript ici est basé sur le fichier miaov.js de Miaowei Classroom. Il s'agit d'un effet de page Web très populaire. Une petite zone est ouverte sur le côté droit ou gauche de la page Web pour afficher les balises populaires. le format, choisissez le nuage de tags, absolument cool, je pense que vous l'aimerez aussi.

L'effet de l'opération est comme indiqué ci-dessous :

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js标签云</title>
<style>
body {background: #000;}
#div1 {position:relative; width:450px; height:450px; margin: 20px auto 0; }
#div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#fff; font-weight:bold; text-decoration:none; padding: 3px 6px; }
#div1 a:hover {border: 1px solid #eee; background: #000; }
#div1 .blue {color:blue;}
#div1 .red {color:red;}
#div1 .yellow {color:yellow;}
p { font: 16px Microsoft YaHei; text-align: center; color: #ba0c0c; }
p a { font-size: 14px; color: #ba0c0c; }
p a:hover { color: red; }
p a:hover {color:red; }
</style>
<script type="text/javascript" src="miaov.js"></script>
</head>
<body>
<div id="div1">
  <a href="#">JS课程</a>
  <a href="#" class="red">教程</a>
  <a href="#">回头一眸</a>
  <a href="#">精品</a>
  <a href="#" class="blue">源码下载</a>
  <a href="#">SEO</a>
  <a href="#" class="red">特效</a>
  <a href="#">继承</a>
  <a href="#" class="red">脚本之家</a>
  <a href="#" class="blue">OOP</a>
  <a href="#">XHTML</a>
  <a href="#">W3C</a>
  <a href="#">石川</a>
  <a href="#" class="yellow">人生如歌</a>
  <a href="#">blue</a>
</div>
</body>
</html>

Copier après la connexion

Le code miaov.js est le suivant :

var radius=120;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=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('div1');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&#63;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);}

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.