Share a jquery Tag Cloud plug-in: 3D Tag Cloud [strongly recommended]

ArticleDirectory

• Related options
• JavaScript code:
• HTML Tag:

You may have seen the tag cloud implemented by flash. Many websites use the tag cloud built by flash, including the related Tag Cloud plug-ins in WordPress. Today, we will introduce a tag cloud plug-in developed by jquery: 3D tag cloud. I hope you will like it!

Related options

• Zoom: 90 initial Scaling
• Min_zoom: 25
• Max_zoom: 120
• Zoom_factor: 2-zoom speed of the scroll wheel
• Rotate_factor:-0.45-Number of Sphere rotations when the mouse moves. Positive will be rotated in reverse order
• FPS: 10-defines the number of animation updates per second
• Centrex: 250-horizontal rotation center in container Div
• Centrey: 250 vertical rotation center in container Div
• Min_font_size: 12
• Max_font_size: 32
• Font_units: 'px'
• Random_points: 50-add random point to sphere to improve the effect
• Foreground_colour: # fff-accepted formats: #333 # 0a0a0a and RGB (N, N, N)
• Background_colour: RGB (, 0)-color names cannot be used

Javascript Code :

$ ('. Tags '). tagcloud (); // the code in the demo is as follows: $ (function () {$ ('# ts1 '). tagcloud ({Centrex: 250, centrey: 250, init_motion_x: 10, init_motion_y: 10 });});
 

 

HTML Tag:

 <  Div  ID  = "Ts1"  Style  = "Width: 500px; Height: 500px; Background-color: #000 ;"  >      <  Ul  >      <  Li > <  A  Href  = "Http://www.gbin1.com/technology/html"  Style  = "Color: # f00 ;"  REL  = "20"  > Html </  A  > </  Li  >      <  Li > <  A  Href  = "Http://www.gbin1.com/technology/css"  REL  = "15"  > CSS </  A  > </  Li  >      <  Li  > <  A  Href = "Http://www.gbin1.com/technology/javascript"  REL  = "10"  > Javascript </  A  > </  Li  >      <  Li  > <  A  Href  = "Http://www.gbin1.com/technology/jquery"  REL = "5"  > Jquery </  A  > </  Li  >      <  Li  > <  A  Href  = "Http://www.gbin1.com/technology/jquerynews"  REL  = "1"  > Jquery plugin</  A  > </  Li  >      <  Li  > <  A  Href  = "Http://www.gbin1.com/technology/jquerytutorial"  REL  = "5"  > Jquery tutorial </  A > </  Li  >      <  Li  > <  A  Href  = "Http://www.gbin1.com/technology/jqueryhowto"  REL  = "10"  > Jquery howto </  A  > </  Li >      <  Li  > <  A  Href  = "Http://www.gbin1.com/technology/jqueryplugins"  REL  = "15"  > Jquery plugins </  A  > </  Li  >      < Li  > <  A  Href  = "Http://www.gbin1.com/technology/jquerymobile"  Style  = "Color: # f00"  REL  = "20"  > Jquery mobile </  A  > </  Li  >      < Li  > <  A  Href  = "Http://www.gbin1.com/technology/javautilities"  REL  = "15"  > Java </  A  > </  Li  >      <  Li  > < A  Href  = "Http://www.gbin1.com/technology/seo"  REL  = "10"  > Seo </  A  > </  Li  >      <  Li  > <  A  Href = "Http://www.gbin1.com/technology/onlinequiz"  REL  = "5"  > Quiz </  A  > </  Li  >      <  Li  > <  A  Href  = "Http://www.gbin1.com/internet/news"  REL = "1"  > News </  A  > </  Li  >      <  Li  > <  A  Href  = "Http://www.gbin1.com/internet/people"  REL  = "5"  > People</  A  > </  Li  >      <  Li  > <  A  Href  = "Http://www.gbin1.com/internet/mobile"  REL  = "10"  > Mobile </  A  > </ Li  >      <  Li  > <  A  Href  = "Http://www.gbin1.com/tools/photoshop"  REL  = "15"  > Photoshop </  A  > </  Li  >      < Li  > <  A  Href  = "Http://www.gbin1.com/tools/design"  Style  = "Color: # f00"  REL  = "20"  > Design </  A  > </  Li  >      </ Ul  >  </  Div  > 

 

Is it easy? You can easily add tags to your website!

Click to download