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>



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值