Ajar anda cara menggunakan javascript untuk mencapai kesan awan tag rawak_dengan kemahiran code

Ajar anda cara menggunakan javascript untuk mencapai kesan awan tag rawak_dengan kemahiran code_javascript

WBOY

Lepaskan： 2016-05-16 15:10:31

asal

1714 orang telah melayarinya

Awan teg ialah satu set teg yang berkaitan dan beratnya yang sepadan. Awan teg biasa mempunyai 30 hingga 150 teg. Berat mempengaruhi saiz fon atau kesan visual lain yang digunakan. Sementara itu, histogram atau carta pai paling biasa digunakan untuk mewakili kira-kira 12 pemberat yang berbeza. Oleh itu, awan teg boleh mewakili lebih berat, walaupun kurang tepat. Selain itu, awan teg selalunya interaktif: teg biasanya hiperpautan yang membolehkan pengguna menelusuri kandungan mereka.

Ia boleh difahami secara kasar sebagai sekumpulan teg yang berkaitan atau tidak berkaitan yang dicampurkan bersama-sama Menetapkan gaya yang berbeza untuk setiap teg mengikut tahap kepentingan yang berbeza atau dimensi lain menyerlahkan perbezaan teg tersebut.

Mari bercakap secara ringkas tentang prinsip pelaksanaan awan teg:
Sebaik sahaja anda memahami apa itu awan teg, ia adalah mudah untuk dilaksanakan. Sebenarnya, anda hanya perlu menetapkan gaya yang berbeza mengikut kepentingan yang berbeza bagi setiap teg.
Di sini kami menggunakan nombor rawak untuk melaksanakan awan teg mudah, bukan berdasarkan dimensi tertentu, gaya rawak semata-mata. Awan teg di sini sebenarnya adalah sekumpulan teg, dan kemudian warna dan saiz fon ditetapkan secara rawak Sudah tentu, saiz fon mempunyai had maksimum dan minimum.
1. Kami menyediakan fungsi nombor rawak dan fungsi warna rawak, dan menggunakan kedua-dua fungsi ini untuk menetapkan gaya untuk label.
2. Kami mengulangi semua teg, dan kemudian menggunakan nombor rawak dan warna rawak dalam langkah 1 untuk menetapkan saiz fon dan warna teg ini.

Lihat kesannya seperti berikut:

Awan teg ringkas adalah semua yang anda perlukan.

Malah, kami juga boleh menetapkan gaya kepada fail gaya, dan kemudian menetapkan gaya teg dengan menetapkan kelas untuk teg, yang memberikan fleksibiliti yang lebih besar.

Jika anda perlu menetapkannya mengikut dimensi tertentu, anda boleh menetapkan atribut dimensi ini kepada teg, dan kemudian menetapkan gaya mengikut atribut ini.

Lihat kod di bawah:

kod 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>

Salin selepas log masuk

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

Salin selepas log masuk

Artikel di atas mengajar anda cara menggunakan javascript untuk mencapai kesan awan teg rawak_Kod yang dilampirkan ialah semua kandungan yang dikongsi oleh editor saya harap ia boleh memberi anda rujukan, dan saya harap anda akan menyokong Script Home.