Javascript-based Dynamic tag yun_javascript

Source: Internet
Author: User
The Cloud Effect of JS labels automatically rotates with the mouse. The whole circle is centered around a circle. No Div code is required between labels, and the text + link form is directly used, javaScript will automatically adjust the display quantity to achieve the best visual effect. Today, I went to the school library and saw a fun thing. I tried Baidu and found it called the "tag ball", which is:

The direct code is as follows:

CSS:

#p1 {position:relative; width:350px; height:350px; border:1px solid #000; margin: 20px auto 0; }#p1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#000; font-weight:bold; text-decoration:none; padding: 3px 6px; }#p1 a:hover {border: 1px solid #eee; background: #FFF; }#p1 .blue {color:blue;}#p1 .red {color:red;}#p1 .green {color:green;}

HTML:

Tag Cloud PHP waterfall stream Tab Fluid layout SEO egg JavaScript miaov CSS asp.net Blue classic OOP Android magic tea house dialog taoke Pin Weibo IPhone

JS

 $(document).ready(function() {  $("#p1").windstagball({      radius:120,      speed:10    });  });

First, write the layout, and set the position of the outermost p style to relative.

The position of the inner element is absolute to form the effect. top is 0, left is 0.
Import the jquery file first and then the corresponding plug-in file.
Obtain the $ ("# xxx") element and call the windstagball () function. radius indicates the variable size of the label ball, and speed indicates the moving speed.

Attached js plug-in

var radius = 120;var dtr = Math.PI/180;var d=300;var mcList = [];var active = false;var lasta = 1;var lastb = 1;var distr = true;var tspeed=10;var size=250;var mouseX=0;var mouseY=0;var howElliptical=1;var aA=null;var oDiv=null;window.onload=function (){var i=0;var oTag=null;oDiv=document.getElementById('p1');aA=oDiv.getElementsByTagName('a');for(i=0;ivItem2.cz){return -1;}else if(vItem1.cz

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.