javascript를 사용하여 임의의 태그 클라우드 효과를 얻는 방법을 가르칩니다_code

javascript를 사용하여 임의의 태그 클라우드 효과를 얻는 방법을 가르칩니다_code_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:10:31

원래의

1689명이 탐색했습니다.

태그 클라우드는 관련 태그와 해당 가중치의 집합입니다. 일반적인 태그 클라우드에는 30~150개의 태그가 있습니다. 무게는 사용되는 글꼴 크기나 기타 시각적 효과에 영향을 미칩니다. 한편, 히스토그램이나 원형 차트는 약 12가지 가중치를 나타내는 데 가장 일반적으로 사용됩니다. 따라서 태그 클라우드는 정확도는 떨어지더라도 더 많은 가중치를 나타낼 수 있습니다. 또한 태그 클라우드는 대화형인 경우가 많습니다. 태그는 일반적으로 사용자가 콘텐츠를 드릴다운할 수 있는 하이퍼링크입니다.

서로 관련이 있거나 관련이 없는 태그를 여러 개 섞은 것으로 대략적으로 이해할 수 있습니다. 중요도나 다른 차원에 따라 각 태그에 서로 다른 스타일을 설정하면 차이점이 강조됩니다. 우리는 이를 일반적으로 태그 클라우드라고 부릅니다.

태그 클라우드 구현 원리에 대해 간단히 이야기해보겠습니다.
태그 클라우드가 무엇인지 이해하고 나면 구현이 간단해집니다. 실제로 각 태그의 중요도에 따라 스타일을 다르게 설정하기만 하면 됩니다.
여기서는 임의의 숫자를 사용하여 특정 차원을 기반으로 하지 않고 순전히 임의의 스타일을 기반으로 하는 간단한 태그 클라우드를 구현합니다. 여기의 태그 클라우드는 실제로 태그 묶음이며 색상과 글꼴 크기는 무작위로 설정됩니다. 물론 글꼴 크기에는 최대 및 최소 제한이 있습니다.
1. 난수 함수와 임의 색상 함수를 설정하고 이 두 함수를 사용하여 라벨 스타일을 설정합니다.
2. 모든 태그를 반복한 다음 1단계에서 임의의 숫자와 임의의 색상을 사용하여 이러한 태그의 글꼴 크기와 색상을 설정합니다.

다음과 같이 효과를 확인하세요.

간단한 태그 클라우드만 있으면 됩니다.

실제로 스타일 파일에 스타일을 설정한 다음 a 태그에 대한 클래스를 설정하여 a 태그의 스타일을 설정할 수도 있는데, 이는 더 큰 유연성을 제공합니다.

특정 차원에 따라 설정해야 하는 경우 이 차원의 속성을 a 태그로 설정한 다음 이러한 속성에 따라 스타일을 설정할 수 있습니다.

아래 코드를 보세요:

html 코드:

<div id="wrap">
 <a href="#">web标准学习</a>
 <a href="#">css</a>
 <a href="#">javascript</a>
 <a href="#">html5</a>
 <a href="#">canvas</a>
 <a href="#">video</a>
 <a href="#">audio</a>
 <a href="#">jQuery</a>
 <a href="#">jQuerymobile</a>
 <a href="#">flash</a>
 <a href="#">firefox</a>
 <a href="#">chrome</a>
 <a href="#">opera</a>
 <a href="#">IE9</a>
 <a href="#">css3.0</a>
 <a href="#">andriod</a>
 <a href="#">apple</a>
 <a href="#">google</a>
 <a href="#">jobs</a>
 </div>

로그인 후 복사

자바스크립트 코드:

window.onload=function(){
 var obox=document.getElementById("wrap");
 var obj=obox.getElementsByTagName("a");
 //随机方法
 function rand(num){
  return parseInt(Math.random()*num+1);
 }
 //随机颜色值
 function randomcolor(){
  var str=Math.ceil(Math.random()*16777215).toString(16);
  if(str.length<6){
   str="0"+str;
  }
  return str;
 }
 //循环
 for( len=obj.length,i=len;i--;){
  obj[i].className="color"+rand(5);
  obj[i].style.zIndex=rand(5);
  obj[i].style.fontSize=rand(12)+12+"px";
  // obj[i].style.background="#"+randomcolor();
  obj[i].style.color="#"+randomcolor();
  obj[i].onmouseover=function(){
   this.style.background="#"+randomcolor();
  }
  obj[i].onmouseout=function(){
   this.style.background="none";
  }
 }
}

로그인 후 복사

위 글에서는 자바스크립트를 사용하여 임의의 태그 클라우드 효과를 얻는 방법을 알려드립니다_첨부된 코드는 모두 에디터가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. 스크립트 홈을 지원해 주시길 바랍니다.