当前位置: 首页 > 技术 > 正文

用JQ为TAG标签添加颜色

编辑:梦小悠   发布:2015-03-23 15:19   分类:技术   阅读:1,859   评论:0  
摘要: 主要是用JQ对TAG进行颜色设置。对TAG颜色的设置,主要用到了JQ里each循环和css的颜色设置以及随机数的生成

为网站的TAG添加下颜色,以以往看到的标签云的颜色添加来看,大多都是在服务器端通过替换的方法添加的颜色CSS。

基于以后的可更改,减少服务器的压力,用JQ来实现对TAG标签颜色的设置是个可取的选择。

对TAG颜色的设置,主要用到了JQ里each循环和css的颜色设置。当然,字体也一并可以设置。

颜色不会是一成不变的,所以这里用到了随机数的生成。

Math.floor(Math.random() * $colors.length)//取整

获取以赋值的颜色基本范围,最后就是组合出CSS的颜色并用JQ的CSS对TAG设置颜色。
最后的代码吐下:

$(function(){
    var $tags = $(“.tags a”);

    if($tags.length <= 0) {//不存在即返回
        return false;
    }

    $(“.tags a”).each(function(){
        $thiz = $(this);

        var $colors = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, ‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’];
        var $rand_color, $color = ”;
        for (var i=0; i<6; i++) {
            $rand_color = $colors[Math.floor(Math.random() * $colors.length)];
            $color      = $color + $rand_color;
        }

    $thiz.css({“color”: “#” + $color});
    });
});

这里是直接生成的CSS的颜色RGB。效果图如下:(这里省略了字体的设置)

火狐截图_2015-03-23T07-19-07.993Z

【上一篇】
【下一篇】

暂时还有没有评论!

发表评论


快捷键:Ctrl+Enter

西瓜