太炫了！导航菜单三维旋转
技术与开发
阿力用现成的建站系统搭建了自己的网站，他一直觉得网站的菜单太单调、太拥挤。最近他在http://desktoptwo.com网站上看到导航菜单是旋转显示，非常新奇。他想在自己的网站上也添加类似的特效，但却不知道该如何设计。
现在网站大都采用平面的导航菜单，一旦菜单项目太多，而网页版面有限，便显得菜单特别拥挤，针对这种情况，可以用我们开发的三维旋转导航菜单插件（插件下载地址：http://www.shudoo.com/bzsoft），它不仅有效地节约了版面，还能彰显网站的个性。
要设计这个插件，先要创建导航菜单，加入菜单图片，然后设定一个半径值，根据半径确定菜单图片运行的圆形轨迹，将图片看作圆形轨迹上的一个点，算出所有点下一时间在圆上的位置并将图片移动到该位置上，重复上面的移动过程，便实现了菜单的旋转，当然我们还会在旋转的过程中加入一些CSS滤镜效果，让旋转菜单看上去更加炫目。根据相同原理，我们还可以制作图片三维旋转插件等。
小知识：什么是CSS滤镜效果？
CSS滤镜主要是用来实现网页上图片的各种特殊效果的，如图片淡入淡出、图片翻转、图片阴影等，它对应的脚本特性为filter。由于非IE浏览器对CSS滤镜支持不足，导致CSS滤镜只能在IE浏览器中表现出较好的效果。
第一步 创建导航菜单
新建一个网页，在网页的〈body〉〈/body〉之间添加一个Div，在该Div中加入菜单图片并为Div添加一个ID。输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：
〈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"/〉
第二步 设定菜单运行轨迹
接下来我们须要确定菜单运行的圆形轨迹，根据半径值和图片的宽度计算出反正弦值，再根据该值的余弦我们便可以得到菜单图片在圆上对应的位置，在确定圆上的位置的过程中，我们为菜单图片加入一些CSS滤镜效果。在〈body〉〈/body〉之间输入JavaScript代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：
var r=200，dv=0.01，w=100，x=400;y=100，pn=8; //r半径，dv偏移量，w图片宽度，x菜单横坐标，y菜单纵坐标，pn菜单图片数量
var pi=Math.PI，d=pi/2;
var pd=Math.asin（w/2/r），ed=pi*2/pn，sm;//pd各个图片的反正弦
function roundMove（）{
var v=document.getElementById（'imground'）;
var arrimg=v.getElementsByTagName（'img'）;
var o，ta，strFilter;
for （var n=1;n<=pn;n++）{
o=arrimg[n-1];
ta=Math.sin（d+ed*n）;//获得当前偏移量的正弦值
strFilter='';
if （ta<0）{//正弦值对应为负弧度，即图片旋转到圆的背面
o.style.left=Math.cos（d+ed*n-pd）*r+x+'px'; //传入当前图片移动的横坐标
}
else{//当图片旋转到圆的正面时
o.style.left=Math.cos（d+ed*n+pd）*r+x+'px';//传入当前图片移动的横坐标
}
o.style.top=ta*10+5+y+'px'; //传入当前图片移动的纵坐标
o.style.width=Math.abs（Math.cos（d+ed*n+pd）-Math.cos（d+ed*n-pd））*r+'px';
o.style.zIndex=parseInt（ta*10）;
if （o.style.zIndex<0）{//当图片旋转到居后的位置时翻转图片
strFilter='FlipH（enabled:true）';
}
else{ //当图片旋转到前面的位置时显示图片正面
strFilter='FlipH（enabled:false）';
}
第三步 形成旋转效果
我们利用定时执行函数来重复执行菜单图片移动过程，实现菜单的旋转效果。紧接第二步的代码，输入以下JavaScript代码：
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（）;
编后
本文炫丽的旋转菜单用到了圆形几何知识，大家还可以利用程序结合几何知识制作出更多炫丽的几何菜单，如扇形菜单、多边形菜单等。