JavaScript を使用してランダムなタグ クラウド効果を実現する方法を教える_コード付き_JavaScript スキル

タグ クラウドは、関連するタグとそれに対応する重みのセットです。一般的なタグ クラウドには 30 ～ 150 個のタグがあります。ウェイトは、使用されるフォント サイズやその他の視覚効果に影響します。一方、ヒストグラムまたは円グラフは、約 12 の異なる重みを表すために最もよく使用されます。したがって、タグ クラウドは、精度は低くなりますが、より多くの重みを表現できます。さらに、タグ クラウドはインタラクティブであることが多く、タグは通常、ユーザーがコンテンツにドリルダウンできるハイパーリンクです。

これは、さまざまな重要度やその他の次元に応じてタグごとに異なるスタイルを設定し、そのようなタグをまとめたものを、通常、タグ クラウドと呼びます。

タグクラウド実装の原理について簡単に説明しましょう:
タグ クラウドが何であるかを理解すると、実際には、各タグの異なる重要性に応じて異なるスタイルを設定するだけで簡単に実装できます。
ここでは、乱数を使用して、特定の次元に基づくのではなく、純粋にランダムなスタイルの単純なタグ クラウドを実装します。ここでのタグ クラウドは実際にはタグの束であり、色とフォント サイズはランダムに設定されます。もちろん、フォント サイズには上限と下限があります。
1. 乱数関数とランダムカラー関数を設定し、これら 2 つの関数を使用してラベルのスタイルを設定します。
2. すべての a タグをループし、ステップ 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>

JavaScript コード:

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";
  }
 }
}

上記の記事では、JavaScript を使用してランダムなタグ クラウド効果を実現する方法を説明しています。添付されたコードはすべて、エディターによって共有されている内容です。参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。