帝国cms调用TAGS信息标签实现字体随机颜色和随机大小变化

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-07-23 10:34:47　-　阅:　-　评:0　-　积分:0

前段时间网站小改版了下，右侧新增了“TAGS信息标签”功能，目的是方便用户查找自己需要的文章。可是后来却发现，虽然洒家列举了些比较重要的标签，但用户在浏览时还是会忽略掉，这可如何是好呢？洒家想了想，字体颜色不突出可能有一点原因吧，于是毅然用jquery写了一段代码，实现了字体随机颜色与随机大小，这样看上去花花绿绿的，总该更醒目了些吧。来放一张效果对比图：帝国cms调用TAGS信息标签实现字体随机颜色和随机大小变化

下面来放一段上述效果的实例源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>帝国cms调用TAGS信息标签实现字体随机颜色和随机大小变化--艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="帝国cms调用TAGS信息标签,TAGS信息标签实现随机字体大小,TAGS信息标签实现随机颜色,tagsinfo">
<style type="text/css">
*{margin:0;padding:0}
a,a:hover{display:inline-block;color:#666;font-size:12px;font-family:Arial;outline:none;text-decoration:none;}
div.cont_r_newlist{width:284px;margin:0 auto}
div.cont_r_newlist a{position:relative;padding-right:5px;}
</style>
</head>
<base href="http://www.yilingsj.com" />
<body>
<div class="cont_r_newlist">
<div class="h3"><h3>随机标签</h3></div>
<a href="/e/tags/?tagid=417" target="_blank" title="淘宝全屏海报代码生成器">淘宝全屏海报代码生成器</a>
<a href="/e/tags/?tagid=156" target="_blank" title="淘宝店铺装修">淘宝店铺装修</a>
<a href="/e/tags/?tagid=399" target="_blank" title="c店完全自定义">c店完全自定义</a>
<a href="/e/tags/?tagid=404" target="_blank" title="全屏模版框架">全屏模版框架</a>
<a href="/e/tags/?tagid=405" target="_blank" title="footer-more-trigger">footer-more-trigger</a>
<a href="/e/tags/?tagid=151" target="_blank" title="悬浮代码">悬浮代码</a>
<a href="/e/tags/?tagid=140" target="_blank" title="鼠标滑过特效">鼠标滑过特效</a>
<a href="/e/tags/?tagid=408" target="_blank" title="sn-simple-logo">sn-simple-logo</a>
<a href="/e/tags/?tagid=100" target="_blank" title="导航特效">导航特效</a>
<a href="/e/tags/?tagid=104" target="_blank" title="遮罩层特效">遮罩层特效</a>
<a href="/e/tags/?tagid=286" target="_blank" title="修改改淘宝销量">修改改淘宝销量</a>
<a href="/e/tags/?tagid=179" target="_blank" title="10px问题">10px问题</a>
<a href="/e/tags/?tagid=114" target="_blank" title="二级下拉菜单">二级下拉菜单</a>
<a href="/e/tags/?tagid=97" target="_blank" title="京东店铺装修">京东店铺装修</a>
<a href="/e/tags/?tagid=284" target="_blank" title="淘宝漏洞">淘宝漏洞</a>
<a href="/e/tags/?tagid=81" target="_blank" title="鼠标跟随">鼠标跟随</a>
<a href="/e/tags/?tagid=391" target="_blank" title="显示已隐藏的店招">隐藏的店招/模块</a>
<a href="/e/tags/?tagid=112" target="_blank" title="jq特效">jq特效</a>
<a href="/e/tags/?tagid=47" target="_blank" title="ie6 bug">ie6 bug</a>
<a href="/e/tags/?tagid=348" target="_blank" title="css3属性">css3属性</a>
<a href="/e/tags/?tagid=50" target="_blank" title="css3边框阴影">css3边框阴影</a>
<a href="/e/tags/?tagid=87" target="_blank" title="css3动画">css3动画</a>
<a href="/e/tags/?tagid=299" target="_blank" title="积分问题">积分问题</a>
<a href="/e/tags/?tagid=77" target="_blank" title="flash动画">flash动画</a>
</div>
<script type="text/javascript" src="/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script language="javascript">
$(function(){
var $c_a=$('div.cont_r_newlist a');/*定义简写样式名*/
for(var i=0;i<$c_a.length;i++) /*遍历a的个数,可用alert(c_a.length);测试结果为24个*/
{var str="0123456789ABCDEF";/*枚举颜色组合基数*/
var c="#";/*颜色前面+#*/
for(var j=0;j<6;j++)/*颜色由6位组成，循环6次输出一组颜色*/
{c=c+str.charAt(Math.random()*str.length);}/*颜色组合数为：16^6=256^3*/
var size=parseInt(Math.random()*(20)+8);/*字体大小范围在[8,28)，左闭右开*/
$c_a.eq(i).css({color:c}).stop().animate({'font-size':size},500);/*遍历a并增加对应的颜色和字体大小属性*/
}
});
</script>
</body>
</html>

每次刷新时，字体大小与颜色都会发生变化，颜色相同的概率是千万分之一。话说颜色相同的概率是：16^6分之一*a*n，也就是256^3分之一*a*n。如果哪天亲刷新出3个以上同色的话，建议亲去买彩票哦，一不小心就中500万啦！

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2014-07-23/178.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！