• 3
  • 新人请关照

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

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

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

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

图片描述

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

阅读 4.9k
评论
    1 个回答
    • 751

    肯定是能的,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

      撰写回答

      登录后参与交流、获取后续更新提醒