纯CSS:多彩颜色、不同颜色 | jQuery+CSS随机显示颜色

老白 3年前 915浏览 0评论

 纯CSS:多彩颜色、不同颜色 | jQuery+CSS随机显示颜色 CSS学习 第1张

1、列表文字不同颜色(刷新不随机) 【纯CSS】

上图所示:每一个链接都有不同的背景颜色,常用语模板中的tag背景颜色、分类列表中的分类名称颜色等,总之很多列表中常用到不同多彩颜色、不同颜色、不同背景颜色。

下面就按照上图所示的效果,分享下这种比较简单的CSS写法:

上图的HTML代码:

<div class="tagcloud">

 <a href="#" class="1">11</a>

 <a href="#" class="a-2">222</a>

 <a href="#" class="a-3">33</a>

 <a href="#" class="a-4">44</a>

 <a href="#" class="a-5">55</a>

 <a href="#" class="a-6">66</a>

 <a href="#" class="a-7">77</a>

 <a href="#" class="a-8">88</a>

 <a href="#" class="a-9">99</a>

 <a href="#" class="a-10">100</a>

 <a href="#" class="a-11">110</a>

 <a href="#" class="a-12">120</a>

 <a href="#" class="a-13">130</a>

 <a href="#" class="145">140</a>

</div>

注意:本文分享的朵彩想法,使用的是获取css名称的最后一个数字,比如最后一个a中,<a href="#" class="145">140</a>,这个css是145,那么最后一个数字就是5!

这个5可以来源于标签id,可以是标签数量,可以是各种ID,只要生成了不同ID数字即可,只获取最后一个数字。

继续CSS:

.tagcloud{padding:2px 0 !important;}

.tagcloud a{color: #fff;padding:6px;font-size: 14px !important; line-height: 38px; margin-right:5px;}

.tagcloud a[class$="0"]{background-color: #4A4A4A;}

.tagcloud a[class$="1"]{background-color: #428BCA;}

.tagcloud a[class$="2"]{background-color: #5CB85C;}

.tagcloud a[class$="3"]{background-color: #D9534F;}

.tagcloud a[class$="4"]{background-color: #567E95;}

.tagcloud a[class$="5"]{background-color: #B433FF;}

.tagcloud a[class$="6"]{background-color: #00ABA9;}

.tagcloud a[class$="7"]{background-color: #B37333;}

.tagcloud a[class$="8"]{background-color: #FF6600;}

.tagcloud a[class$="9"]{background-color: #D8B303;}

来验证下之前说的最后一个a代码:,<a href="#" class="145">140</a>,css中最后一个数字为5,这时候获取的就是上方css中的 .tagcloud a[class$="5"]{background-color: #B433FF;}。

验证就可以看出:纯CSS:多彩颜色、不同颜色 | jQuery+CSS随机显示颜色 CSS学习 第2张背景颜色  = background-color: #B433FF;  

这个方法纯CSS实现,适用于在序列中可以加入css数字的情况下,下面继续介绍一种随机显示,通过JS实现的!

2、显示不同颜色(刷新会随机显示) 方法:jQuery+CSS

纯CSS:多彩颜色、不同颜色 | jQuery+CSS随机显示颜色 CSS学习 第3张

HTML:

<div id="divTags">
<ul>
<li><a href="#">图片</a></li>
<li><a href="#">标签</a></li>
<li><a href="#">关键</a></li>
<li><a href="#">关键词</a></li>
<li><a href="#">哈哈</a></li>
</ul>
</div>

jQuery:

jQuery(function($) {
 
 var sc=$(document);
 var tags_a = $("#divTags li"); 
 tags_a.each(function(){ 
  var x = 5; 
  var y = 0; 
 var rand = parseInt(Math.random() * (x - y + 1) + y); 
  $(this).addClass("divTags"+rand); 
 });
});

CSS:

#divTags ul li{white-space: nowrap;padding: 0;margin-right: 5px;display:inline-block;*display:inline; *zoom:1;}

#divTags ul li.divTags0 a {color:#003366;opacity:.9;}

#divTags ul li.divTags1 a {color:#993300;opacity:.9;}

#divTags ul li.divTags2 a {color:#05792D;opacity:.9;}

#divTags ul li.divTags3 a {color:#16929D;opacity:.9;}

#divTags ul li.divTags4 a {color:#CC0000;opacity:.9;}

#divTags ul li.divTags5 a {color:#0B0B0B;opacity:.9;}

#divTags ul li.divTags0 a:hover{background-color: #003366;text-decoration: none;color:#fff;text-decoration: none;}

#divTags ul li.divTags1 a:hover{background-color: #993300;text-decoration: none;color:#fff;text-decoration: none;}

#divTags ul li.divTags2 a:hover{background-color: #05792D;text-decoration: none;color:#fff;text-decoration: none;}

#divTags ul li.divTags3 a:hover{background-color: #16929D;text-decoration: none;color:#fff;text-decoration: none;}

#divTags ul li.divTags4 a:hover{background-color: #CC0000;text-decoration: none;color:#fff;text-decoration: none;}

#divTags ul li.divTags5 a:hover{background-color: #0B0B0B;text-decoration: none;color:#fff;text-decoration: none;}



发表评论