How to use javascript to implement random Tag Cloud Effect _ code _ javascript skills

The following small series will teach you how to use javascript to implement the random Tag Cloud Effect _ additional code. I think it is very practical. I will share it with you now. A reference tag cloud is a set of related tags and their weights. A typical Tag Cloud has 30 to 150 tags. The weight affects the font size or other visual effects. At the same time, histograms or pie charts are commonly used to represent about 12 different weights. Therefore, tag clouds can represent more permissions, though not so accurate. In addition, tag clouds can often interact with each other: tags are typical hyperlinks, allowing users to carefully understand their content.

It can be understood that a bunch of related or irrelevant tags are mixed into one piece. Different styles for each tag are highlighted based on their importance or different dimensions, these stacks of tags are what we usually call the tag cloud.

The following describes the principles of Tag Cloud implementation:
It is easy to implement the tag cloud based on the importance of each tag.
Here we use random numbers to implement a simple tag cloud, not based on certain dimensions, purely random style. The label Cloud here is actually a bunch of a labels, and then randomly set the color and font size, of course, the font size has a maximum and minimum limit.
1. We have set a random number function and a random color function to set a style for the tag.
2. We cycle all the labels, and then use the random number and random color in step 1 to set the font size and color of these labels.

The result is as follows:

A simple tag cloud is over.

In fact, we can also set the style to the style file, and then set the style of the tag by setting the class for the tag, which is more flexible.

If you need to set the style based on certain dimensions, you can set the attributes of the dimension for tag a and then set the style based on these attributes.

See the code below:

Html code:

Css javascript html5 canvas video audio jQuery jQuerymobile flash firefox chrome IE9 css3.0 andriod apple google jobs

Javascript code:

Window. onload = function () {var obox = document. getElementById ("wrap"); var obj = obox. getElementsByTagName ("a"); // random function rand (num) {return parseInt (Math. random () * num + 1);} // random color value function randomcolor () {var str = Math. ceil (Math. random () * 16777215 ). toString (16); if (str. length <6) {str = "0" + str;} return str;} // loop 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 ";}}}

The above section teaches you how to use javascript to implement the random Tag Cloud Effect _ additional code is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support for your feet.