posts - 189,comments - 115,trackbacks - 0

JavaScript实现的3D球面标签云效果http://topic.csdn.net/u/20101021/10/33959060-2C51-4E15-ABA7-FC770A39E328.html





效果预览点这里: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

关键代码:
for( var i=1; i<max+1; i++){
  if( distr )
  {
phi = Math.acos(-1+(2*i-1)/max);
theta = Math.sqrt(max*Math.PI)*phi;
  }
  else{
phi = Math.random()*(Math.PI);
theta = Math.random()*(2*Math.PI);
  }
  //���任
  mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);
 //这里有点疑问,mcList[i-1].cx=radius* Math.cos(phi)*Math.sin(theta);   
  mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);
  mcList[i-1].cz = radius * Math.cos(phi);
//这里有点疑问,mcList[i-1].cz = radius * Math.cos(theta);

aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';
aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';
}
posted on 2010-10-27 09:06 MEYE 阅读(611) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: