Blogbus Hack 3 : Enhanced Tag Clouds
OK，在远离了hack很久之后，这次总算带来了新的hack，其实也不算全新，而是对旧有的Tag Clouds Hack进行了改造，加入了渐变颜色功能，此效果已应用到本站。
如图所示，新的Tag Clouds不仅能根据使用频率显示不同字号，还对tag clouds进行了颜色渐变处理，代码如下:
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;
} 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);
如果你对以上OOP编程方式不太熟悉的话，建议阅读下Christian Heilmann的这本Beginning JavaScript with DOM Scripting and Ajax。目前本站应用的script已全部转为了OOP的方式。
另外，此代码暂时只在Firefox下测试，也有可能有部分bug。
Categorized under Blogbus 增强 with blogbus hack Enhanced-Tag-Clouds tagged.
22 Replied
虽然可以，但是weight的区分度并不多，所以实际看起来层次感并不强，而且中文只存在粗体与非粗体之分，windows下的粗体还是算出来的伪粗体。
(2008-08-10 01:30:41)
新模板系统实现不了这个模板
(2008-05-03 15:11:28)
比原先那个看着亲切呢PUNKID
哈哈，谢谢夸奖，这个模板再调试调试就可以发布了。
(2008-05-02 16:20:58)
还有就是，首页中的博链和 日志页中的最新日志板块如果也想单行显示该怎么做呢。
这三行CSS代码可以解决这些问题
div.module ul li {height:1.7em;overflow:hidden;}
#nComments ul li {text-indent:-1em;}
#nComments ul li span {display:none;}
(2008-05-01 14:10:30)
如果方便的话，加qq也好啊
我的是319870703
CSS里加入这句
#nComments ul li {overflow:hidden;height:1.7em;}(2008-05-01 11:36:15)
还有个问题是，我用的也是你的一块板子，想问下，如果我想要最新评论和最新日志这种板块中，显示的都只是一行，多出的就省略掉，该怎么弄呢
用jQuery实现的，但是具体怎么实现得懂一定的javascript。
我不太明白你的意思，你是说侧边栏显示为一栏?
(2008-04-30 23:37:26)
不太明白你的意思
(2008-04-23 23:57:24)
谢谢哈~~~
貌似还得自己改模板才行。
(2008-04-23 21:08:10)
感觉右边少了点什么
4列? 那恐怕太拥挤了吧。940的宽度，减去正文的530，侧边栏只有310了，再除个3，每列100都不到(算上空白边距)。
个人而言，不太喜欢为了填充空白而加上些不必要的东西。而且这个模板放在这个站上也是以内容为主，如果你喜欢的话，可以拿来自己folk下，我有提供下载和模板的PSD文件。
(2008-04-22 11:21:32)
我用的还是这个
http://blogbus-hack.blogbus.com/logs/11457747.html
你需要把你的
removeAD('postBody')里的postBody改为你的模板相应的日志class，就是包含日志内容的那个div的class，不知道这样解释清楚了没。(2008-04-21 10:58:15)
可能是浏览器的差异，因为字号和主体内容的字号是一样的啊
(2008-04-21 10:54:22)
你可以看下这个站，还是有除掉广告的，应该是还有用的，bus的代码本身没变。
(2008-04-09 11:42:36)
-v-.
加你的链接了。。。
需要自定义模板，detail-post里改变
{#cat}标签所在位置，具体的话还需要你掌握点HTML知识。(2008-04-02 11:04:17)