首页 > 如何在hexo博客首页中实现漂亮的文字云(word cloud)效果?

如何在hexo博客首页中实现漂亮的文字云(word cloud)效果?

如何将博客中的文章标题制作成文字云放在首页?点击标题即可跳转相应的页面。

例如wolfram首页(http://www.wolfram.com/)的效果

不同文字大小不同,鼠标滑过有颜色渐隐效果

不知这种效果在hexo博客中能否实现?


肯定是能的,Hexo只是一个静态渲染的引擎而已。

鼠标划过的动态效果是通过JS实现的:

$('.initial_hidden').each(function(i) {
var $fader = $(this);
setTimeout(function() {$fader.addClass('fade_this_in');}, i*50+450);
setTimeout(function() {$fader.addClass('gray_link');}, i*50+1200);
});
$('#spikeyarea').mouseover(function(e) {$('#spikeydiv').toggleClass('spikeyhighlight');});
$('#spikeyarea').mouseout(function(e) {$('#spikeydiv').toggleClass('spikeyhighlight');});

然后文字大小不同,你可以参考Hexo官方的tagcloud实现:

https://github.com/hexojs/hexo/blob/master/lib/plugins/helper/tagcloud.js

【热门文章】
【热门文章】