超酷的javascript文字云/标签云效果 - D3 Cloud
2012-10-15 16:01
369 查看
日期:2012-10-11 来源:GBin1.com
![](http://www.gbin1.com/technology/javascript/20121011-javascript-word-clouds/title.jpg)
在线演示
如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用D3-Cloud,这是一个超棒的开源字体云效果javascript类库,基于知名的D3.js,能够帮助你生成类似wordle.com风格的字体或者标签云效果。
这个类库使用HTML5画布来生成字体效果,整个布局算法可以异步实现,只需要设置时间块大小。并且支持动画特效。整体性能非常不错。
文字,字体和字体大小,旋转和边框距离都可以自定义。包含两个事件:
word - 当每一个文字添加后触发
end - 当全部文字添加后触发
当然,支持web字体,你可以使用@font-face来设置字体风格。如果你能够应用到自己的网站中,肯定能够给你的网站增色不少!
来源:超酷的javascript文字云/标签云效果 - D3 Cloud
![](http://www.gbin1.com/technology/javascript/20121011-javascript-word-clouds/title.jpg)
在线演示
如果你想创建漂亮的文字云或者标签云效果的话,你可以考虑使用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
相关文章推荐
- 超酷的javascript文字云/标签云效果 - D3 Cloud
- 超酷的javascript文字云/标签云效果 - D3 Cloud
- JavaScript为文本框内选中文字添加标签
- 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台
- css配合JavaScript实现tab标签切换效果
- javascript 打字效果的文字特效
- 基于JavaScript实现TAB标签效果
- javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
- JavaScript文字上下翻滚效果
- 13个效果超酷的Javascript网页导航菜单
- javascript图片文字上下滚动效果
- JavaScript 图片滑动展示效果 转载自http://www.cnblogs.com/cloudgamer/
- JavaScript实现彩虹文字效果的方法
- 超酷的鼠标拖拽翻页(分页)效果实现javascript代码
- javascript 文字滚动效果
- 【JavaScript】连接文字滚动效果
- 自动改变文字大小和颜色的javascript效果
- 分享一个HTML5画布实现的超酷文字弹跳球效果
- 13个效果超酷的Javascript网页导航菜单
- JavaScript一点也不简单—实现“鼠标控制局部文字滚动效果”初探