【代码】给BlogBus加上标签云（Tags Cloud）效果

JavaScript部分：

ETC={
    tagID: ‘tags’,      // Tag模块栏ID号，无须更改
    maxWeight: 1.8,     // 设置最大字号 (em unit)
    minWeight: 1,         // 设置最小字号 (em unit)
    color: true,         // 是否采用渐变效果
    maxColor: ‘2A526F’,    // 设置渐变最深颜色，暂时不支持类’FFF’简写方式，无须输入’#’号
    minColor: ’54A4DE’,    // 设置渐变最浅颜色

    init:function() {
        if (!document.getElementById || !document.getElementsByTagName) return;
        if (!document.getElementById(ETC.tagID)) return;
        
        var taglist = document.getElementById(ETC.tagID);
        var tag = taglist.getElementsByTagName(‘li’);
        var totalCount = tag.length – 1;
        var maxCount = parseInt(tag[0].getElementsByTagName(‘span’)[0].firstChild.nodeValue.substring(1));
        var minCount = parseInt(tag[tag.length – 1].getElementsByTagName(‘span’)[0].firstChild.nodeValue.substring(1));
        var offset = (ETC.maxWeight – ETC.minWeight) / (maxCount – minCount);

        if (ETC.color != true || ETC.maxColor == null || ETC.minColor == null || ETC.maxColor == ETC.minColor) {
            for (var i=0; i <= totalCount; i++) {
            var count = parseInt(tag[i].getElementsByTagName(‘span’)[0].firstChild.nodeValue.substring(1));
            var weight = (count – minCount) * offset + ETC.minWeight;

            tag[i].getElementsByTagName(‘a’)[0].style.fontSize = weight + ’em’;
            }
        }
        else {
            for (var i=0; i <= totalCount; i++) {
            var count = parseInt(tag[i].getElementsByTagName(‘span’)[0].firstChild.nodeValue.substring(1));
            var weight = (count – minCount) * offset + ETC.minWeight;

            tag[i].getElementsByTagName(‘a’)[0].style.fontSize = weight + ’em’;
            tag[i].getElementsByTagName(‘a’)[0].style.color = ETC.getColorByScale(i, totalCount);
            }
        }    
    },

    hex2dec:function(hex) {
        return parseInt(hex,16);
    },

    dec2hex:function(dec) {
        return dec.toString(16);
    },    

    getColorByScale:function(i, totalCount) {

        var minr = ETC.hex2dec(ETC.minColor.substr(0, 2));
        var ming = ETC.hex2dec(ETC.minColor.substr(2, 2));
        var minb = ETC.hex2dec(ETC.minColor.substr(4, 2));

        var maxr = ETC.hex2dec(ETC.maxColor.substr(0, 2));
        var maxg = ETC.hex2dec(ETC.maxColor.substr(2, 2));
        var maxb = ETC.hex2dec(ETC.maxColor.substr(4, 2));

        var r = ETC.dec2hex(parseInt(maxr – (maxr – minr) * i / totalCount));
        var g = ETC.dec2hex(parseInt(maxg – (maxg – ming) * i / totalCount));
        var b = ETC.dec2hex(parseInt(maxb – (maxb – minb) * i / totalCount));

        if (r.length == 1) r = ‘0’ + r;
        if (g.length == 1) g = ‘0’ + g;
        if (b.length == 1) b = ‘0’ + b;

        return ‘#’ + r + g + b;

    },

    addEvent:function(elm, evType, fn, useCapture) {
        if (elm.addEventListener)
        {
            elm.addEventListener(evType, fn, useCapture);
            return true;
 &nb
sp;      } else if (elm.attachEvent) {
            var r = elm.attachEvent(‘on’ + evType, fn);
            return r;
        } else {
            elm[‘on’ + evType] = fn;
        }
    }

}

ETC.addEvent(window, ‘load’, ETC.init, false);

CSS部分：

#tags ul li {display:inline;margin-left:1px;} /*如果你希望Tags横排的话*/
#tags ul li { background:none; } /*如果你不希望显示Bullet的话*/
#tags ul li span{display:none;} /*如果你不希望显示诸如[36]的tag使用次数的话*/

转载请注明：No.77 疯人院 - 游戏业界新闻 - 主机游戏资料攻略 » 【代码】给BlogBus加上标签云（Tags Cloud）效果