效果預(yù)覽點這里：http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html
下載效果點這里：http://www.miaov.com/miaov_demo/3dLable/3dLable.rar
使用說明：
一般需要修改的，應(yīng)該是3D球面的大小，也就是半徑，修改了大小，就可以隨意放進(jìn)自己頁面的任何地方。
半徑大小修改：
下載后，打開 miaov.js 文件，第一行：var radius = 120; 這就是半徑大小值了。
文字的修改在 miaov_demo.html 文件中，可以任意添加關(guān)鍵詞的個數(shù)；
如果希望修改文字顏色、鼠標(biāo)經(jīng)過的樣式，可以打開 miaov_style.css 文件，修改相關(guān)的樣式即可。
效果原理：
制作這個效果需要重新回顧一下高中的數(shù)學(xué)知識：
球坐標(biāo)系
例如：
r∈[0,+∞),
φ∈[0, 2π],
θ∈[0, π] .
r = 常數(shù)，即以原點為心的球面；
θ= 常數(shù)，即以原點為頂點、z軸為軸的圓錐面；
φ= 常數(shù)，即過z軸的半平面。
……
在這里，我們就不展開講了，由數(shù)學(xué)老師來說明更合適些^_^
有興趣的朋友可以看看百度百科的球坐標(biāo)系原理：http://baike.baidu.com/view/1196991.htm
關(guān)鍵代碼：
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 閱讀(926)
評論(0) 編輯 收藏