jq文字标签混排随机字体大小

样式:

<style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{font:12px/180% Arial, Helvetica, sans-serif ,"宋体";}

    .demo{background:#FFF8DE;border:solid 1px #ff6600;width:380px;margin:20px auto;}
    .demo h2{font-size:18px;height:32px;padding:10px 0 0 20px;font-family:"微软雅黑","宋体";border-bottom:solid 1px #ff6600;}
    .taglist{padding:20px 20px 30px 20px;}
    .taglist a{padding:3px;display:inline-block;white-space:nowrap;}
    a.size1{font-size:16px;padding:10px;}
    a.size2{padding:7px;font-size:18px;}
    a.size3{padding:5px;font-size:20px;}
    a.size4{padding:5px;font-size:20px;}
    a.size5{padding:5px;font-size:24px;}
    a.size6{padding:0px;font-size:18px;}
    a.size7{padding:5px;font-size:20px;}
    a.size8{padding:5px;font-size:24px;}
    a.size9{padding:0px;font-size:18px;}
style>
 
  
JQ:
<script type="text/javascript">
    $(document).ready(function(){
        var tags_a = $("#tags").find("a");
        tags_a.each(function(){
            var x = 9;
            var y = 0;
            var rand = parseInt(Math.random() * (x - y + 1) + y);
            $(this).addClass("size"+rand);
        });

    });
script>
 
  
Html:
 
  
 
  
<div class="demo">
    <div class="taglist" id="tags">
        <a class="tag">小麦种植a>
        <a class="tag">豆类种植a>
        <a class="tag">麻类种植a>
        <a class="tag">其他水果种植a>
        <a class="tag">坚果种植a>
        <a class="tag">糖料种植a>
        <a class="tag">其他批发业a>
        <a class="tag">水产养殖a>
        <a class="tag">葡萄种植a>
        <a class="tag">综合零售a>
        <a class="tag">油料种植a>
        <a class="tag">林木育种a>
        <a class="tag">蔬菜种植a>
        <a class="tag">竹材采运a>
        <a class="tag">烟草种植a>
        <a class="tag">内陆养殖a>
        <a class="tag">仓储业a>
        <a class="tag">住宿业a>
        <a class="tag">棉花种植a>
        <a class="tag">其他水果种植a>
        <a class="tag">玉米种植a>
    div>
div>

 
  


你可能感兴趣的:(JQuery)