JQuery实现简单的标签云

最新推荐文章于 2022-07-04 09:33:09 发布

原创最新推荐文章于 2022-07-04 09:33:09 发布 · 351 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JQuery 专栏收录该内容

2 篇文章

订阅专栏

此博客展示了TagCloud的实现方式，包括HTML、CSS、JavaScript等技术的应用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Tag Cloud </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 <!-- <link rel="stylesheet" href="style.css" type="text/css" /> -->
 <script src="../jquery-1.6.1.min.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   var obj=$("#wrap 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].style.left=rand(600)+"px";   
    obj[i].style.top=rand(400)+"px";   
    obj[i].className="color"+rand(5);   
    obj[i].style.zIndex=rand(5);   
    obj[i].style.fontSize=rand(12)+12+"px";   
    obj[i].style.color="#"+randomcolor();
   }
  });
 </script>
 </HEAD>

 <BODY>
 <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>
 </BODY>
</HTML>