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

来源:互联网 发布:挣钱软件排名第一 编辑:程序博客网 时间:2024/06/08 08:42

样式:

<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>


原创粉丝点击