JavaScript实现的3D球面标签云效果

miaov2010 2010-10-21 10:08:24
加精
这个效果是由 妙味QQ群[116279832] 里的 “小小丫头” 提出来的。

她说一般这个效果都是由 FLASH 实现的,能不能由 JavaScript 实现呢?

我们也十分喜欢这个效果,就花了一些时间写出来了,如图所示:




效果预览点这里:http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html
下载效果点这里:http://www.miaov.com/miaov_demo/3dLable/3dLable.rar


使用说明:

一般需要修改的,应该是3D球面的大小,也就是半径,修改了大小,就可以随意放进自己页面的任何地方。

半径大小修改:

下载后,打开 miaov.js 文件,第一行:var radius = 120; 这就是半径大小值了。

文字的修改在 miaov_demo.html 文件中,可以任意添加关键词的个数;

如果希望修改文字颜色、鼠标经过的样式,可以打开 miaov_style.css 文件,修改相关的样式即可。

效果原理:

制作这个效果需要重新回顾一下高中的数学知识:

球坐标系
例如:
r∈[0,+∞),
φ∈[0, 2π],
θ∈[0, π] .
r = 常数,即以原点为心的球面;
θ= 常数,即以原点为顶点、z轴为轴的圆锥面;
φ= 常数,即过z轴的半平面。
……
在这里,我们就不展开讲了,由数学老师来说明更合适些^_^
有兴趣的朋友可以看看百度百科的球坐标系原理:http://baike.baidu.com/view/1196991.htm


...全文
13626 278 打赏 收藏 转发到动态 举报
写回复
用AI写文章
278 条回复
切换为时间正序
请发表友善的回复…
发表回复
裸奔的蜗牛 2013-03-23
  • 打赏
  • 举报
回复
不错 ,哦喜欢
cuixiping 2013-03-23
  • 打赏
  • 举报
回复
效果不错,赞一个。 有个建议,建议鼠标放在链接上的时候这个链接要停下来,否则容易点错。
diantai2013 2013-03-21
  • 打赏
  • 举报
回复
可以实现八个方向的旋转,可不可以实现所有方向的旋转
Kilin_Zhang 2013-02-01
  • 打赏
  • 举报
回复
收了,数学是我永远的痛
远思近观 2013-01-31
  • 打赏
  • 举报
回复
感谢分享,确实不错!用处很大的嘿~!
hand_some1 2013-01-31
  • 打赏
  • 举报
回复
赞一个!
qq544230987 2012-11-13
  • 打赏
  • 举报
回复
我拿走了。。。
scscms太阳光 2012-11-08
  • 打赏
  • 举报
回复
强!
ms 2012-11-08
  • 打赏
  • 举报
回复
感觉不错 啊
fwacky 2012-11-08
  • 打赏
  • 举报
回复
这个同样是人,差距呀!
zh_haining 2012-11-07
  • 打赏
  • 举报
回复
真是给力啊,楼主真碉堡了
架构师易哥 2012-02-05
  • 打赏
  • 举报
回复
mark
flycnc 2011-12-25
  • 打赏
  • 举报
回复
好炫好漂亮,mark一下
wochunshabi 2011-06-18
  • 打赏
  • 举报
回复
说真的,我数学只有初中水平
兔斯基 2011-06-13
  • 打赏
  • 举报
回复
好强大啊
phperstsar 2011-05-21
  • 打赏
  • 举报
回复
下载下来慢慢的研究,对了,你们的企业网站做的蛮不错,太完美了··············
vaivxuanzi 2011-04-13
  • 打赏
  • 举报
回复
鼠标移动到某个标题上面 应该要停止转动 这样感觉会好点 哈哈
iLove9ouHenry 2011-04-10
  • 打赏
  • 举报
回复
太棒了!
miaov2010 2011-03-28
  • 打赏
  • 举报
回复
感谢大家的支持,还有很多别的效果,会陆续更新上来~
zyzy15 2010-12-10
  • 打赏
  • 举报
回复
mark,现在下不了,回家下去
加载更多回复(210)

87,907

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧