zoukankan      html  css  js  c++  java
  • 超酷的javascript文字云/标签云效果 D3 Cloud

    日期:2012-10-11  来源:GBin1.com

    超酷的javascript文字云效果 - D3 Cloud

    在线演示

    如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用D3-Cloud,这是一个超棒的开源字体云效果javascript类库,基于知名的D3.js,能够帮助你生成类似wordle.com风格的字体或者标签云效果。

    这个类库使用HTML5画布来生成字体效果,整个布局算法可以异步实现,只需要设置时间块大小。并且支持动画特效。整体性能非常不错。

    配置如下

    var fontSize = d3.scale.log().range([10, 100]);
    
    var layout = cloud()
          .size([960, 600])
          .timeInterval(10)
          .text(function(d) { return d.key; })
          .font("Impact")
          .fontSize(function(d) { return fontSize(+d.value); })
          .rotate(function(d) { return ~~(Math.random() * 5) * 30 - 60; })
          .padding(1)
          .on("word", progress)
          .on("end", draw)
          .words([…])
          .start();

    文字,字体和字体大小,旋转和边框距离都可以自定义。包含两个事件:

    • word - 当每一个文字添加后触发
    • end - 当全部文字添加后触发

    当然,支持web字体,你可以使用@font-face来设置字体风格。如果你能够应用到自己的网站中,肯定能够给你的网站增色不少!

    来源:超酷的javascript文字云/标签云效果 - D3 Cloud

    欢迎访问GBin1.com
  • 相关阅读:
    Android测试入门篇
    SQL的基本知识
    正则表达式
    ES5语法
    vscode
    继承小结
    工作遇到的问题
    后台程序员的HTTP缓存
    xhr下载图片/服务器向客户端推送消息
    HTTP2.0
  • 原文地址:https://www.cnblogs.com/gbin1/p/2724434.html
Copyright © 2011-2022 走看看