javascript 实现的旋转导航效果.有点苹果的味道.
如图:
现在网站大都采用平面的导航菜单，一旦菜单项目太多，而网页版面有限，便显得菜单特别拥挤，针对这种情况，我们来制作一款三维旋转导航菜单，它不仅有效的节约了版面，还能彰显网站的个性。首先我们来创建导航菜单，添加一个div，在该div中加入菜单图片，然后设定一个半径值，根据半径确定一个菜单图片运行的圆形轨迹，将图片看作圆形轨迹上的一个点，算出所有点下一时间在圆上的位置并将图片移动到该位置上，重复上面的移动过程，便实现了菜单的旋转，当然我们还会在旋转的过程中加入一些CSS滤镜效果，让旋转菜单看上去更加逼真。根据相同原理，我们还可以制作用于统计的圆形图饼等。
小知识：什么是CSS滤镜效果？
CSS滤镜主要是用来实现网页上图片的各种特殊效果的，如图片淡入淡出、图片翻转、图片阴影等，它对应的脚本特性为filter。虽然由于非IE浏览器对CSS滤镜支持不足，导致CSS滤镜只能在IE浏览器中能表现出较好的效果，但是仍不失为网页增加特效的好办法。
第一步：创建导航菜单
新建一个网页，在网页的<body></body>之间添加一个div，在该div中加入菜单图片并为div添加一个ID。相关代码如下所示：
<div id="imground">
<img class="point" src="imgs/img1.png"/>
<img class="point" src="imgs/img2.png"/>
<img class="point" src="imgs/img3.png"/>
<img class="point" src="imgs/img4.png"/>
<img class="point" src="imgs/img5.png"/>
<img class="point" src="imgs/img6.png"/>
<img class="point" src="imgs/img7.png"/>
<img class="point" src="imgs/img8.png"/>
</div>
第二步：设定菜单运行的圆形轨迹，计算各个菜单图片在圆上的位置
接下来我们需要确定菜单运行的圆形轨迹，根据半径值和图片的宽度计算出反正弦值，再根据该值的余弦我们便可以得到菜单图片在圆上对应的位置,在确定在圆上的位置的过程中，我们为菜单图片加入一些CSS滤镜效果，让旋转菜单看上去更加逼真。在<body></body>之间输入以下JavaScript代码：
var r=200,dv=0.01,w=100,x=400;y=100,pn=8; //r半径，dv偏移量，w图片宽度，x菜单横坐标，y菜单纵坐标，pn菜单图片数量
function goR(){
var o=document.getElementById('imground');
var arrimg=o.getElementsByTagName('img');
for (var n=0;n<arrimg.length;n++){
arrimg[n].onmouseout=function(){sm=setInterval('roundMove()',50);} //鼠标离开菜单后继续转动
arrimg[n].onmouseover=function(){clearInterval(sm)} //鼠标移上菜单停止转动
arrimg[n].onmousedown=function(){dv=dv*2} //鼠标单击菜单加快转到速度
}
sm=setInterval('roundMove()',50);//定时重复执行移动函数
}
goR();