利用JavaScript和CSS实现多彩tag标签

2018-11-04 19:19:46  阅读 705 次 评论 0 条

我相信很多朋友都喜欢在博客的右侧安排一个区块来放置网站的tag标签,对于做SEO的博主们来说,这可以起到很好的SEO作用,但是想要tag标签更漂亮怎么办?一般普遍的做法是利用js+css来实现,以下以zblog为例。


QQ截图20181104191912.png




例如:代码如下

JavaScript
<script type="text/javascript"> 
    $(document).ready(function() { 
        var tags_a = $("#tags a"); 
        tags_a.each(function(){ 
        var x = 9; 
        var y = 0; 
        var rand = parseInt(Math.random() * (x - y + 1) + y); 
        $(this).addClass("tags"+rand); }); 
    })  </script>
CSS
#tag .tags0{background-color: #CC3300;}
#tag .tags1{background-color: #CC3300;}
#tag .tags2{background-color: #339900;}
#tag .tags3{background-color: #FF9933;}
#tag .tags4{background-color: #0099CC;}
#tag .tags5{background-color: #00CCCC;}
#tag .tags6{background-color: #99CC66;}
#tag .tags7{background-color: #339999;}
#tag .tags8{background-color: #FF6699;}
#tag a:hover{color:#FFFFFF;text-decoration:none;background-color: #4097db;}

以上方式能够实现多彩tag,但像小编这样懒的人,写这么多的css颜色样式,实在有点太为难,所以下面列出小编所用的方式

js代码

JavaScript
 $('#tags a').each(function(){
     var tagcolor=new Array("#C01E22","#0088cc","#FF5E52","#2CDB87","#00D6AC","#EA84FF","#FDAC5F","#FD77B2","#0DAAEA","#C38CFF","#FF926F","#8AC78F","#C7C183","#9370DB","#2f889a","#9e5ae2");//颜色数组
     var cou=Math.floor(Math.random()*tagcolor.length+1)-1;//生成随机数,用于抽取颜色
     $(this).css({
         'color':tabcolor[cou]
     })
  })



微信扫码查看本文
本文地址:https://www.yangguangdream.com/?id=2004
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?