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>
阅读全文
1 0
- jq文字标签混排随机字体大小
- android 云标签,文字墙(文字随机排列效果)
- 图片和文字混排
- 设置一个Label控件上文字的字体样式和字体大小随机的代码.
- 设置一个Label控件上文字的字体样式和字体大小随机的代码
- 随机生成字体大小
- TextView的图文混排,不同文字颜色混排
- JQ标签页(jq-ui)
- 图文混排,文字环绕图片效果
- Css 图片和文字的混排
- ios开发--表情和文字混排
- 如何处理图标文字的混排
- Coco2dx 图文混排 (二) 文字缓存
- html布局之 图标文字混排
- html布局之 图片文字混排
- IOS label导入带html标签文字,并且可以改变字体大小
- Android 文字和图片混排,文字环绕图片
- jq 读取lable 文字
- 设计模式之观察者模式
- 第6章 单例模式与多线程
- LeetCode-21- Merge Two Sorted Lists(合并两个已排序链表)
- php框架Laravel如何友好的修改.env配置文件详解
- opencv-python图像数据的读取
- jq文字标签混排随机字体大小
- HDU3706Second My Problem First(单调队列)
- RHEL 5 虚拟机环境网络配置
- PAT 1052卖个萌
- CentOS之Mysql安装-yellowcong
- Java注释@interface的用法【转】
- dbUtils 常用的5个结果集处理实现
- React 子组件向父组件传值
- 1044: [HAOI2008]木棍分割