【文件属性】：
文件名称：炫丽的旋转导航菜单.rar
文件大小：202KB
文件格式：RAR
更新时间：2016-03-28 08:53:15
炫丽 旋转 导航菜单 rar
网络模仿秀
你是不是看到别人的网站和社区的亮点功能很心动？想把它们搬进自己的网站或社区中吗？你是不是在网上看到新奇或热门的新功能，想自己模仿设计一下？来我们的“网络模仿秀”瞧瞧，一定有你想要的！如果你有什么网络功能的需求，请发信给我们，电子信箱：pcw-chendx@vip.sina.com。
小力特别喜欢一些新奇的网站功能，今天在逛一个国外网站的时候，发现它上面的导航菜单是不停旋转的，非常的炫，但是如何把这个菜单应用到自己的网站上呢?
个性化网站必备—炫丽的旋转导航菜单
现在网站大都采用平面的导航菜单，一旦菜单项目太多，而网页版面有限，便显得菜单特别拥挤，针对这种情况，我们来制作一款三维旋转导航菜单，它不仅有效的节约了版面，还能彰显网站的个性。首先我们来创建导航菜单，添加一个div，在该div中加入菜单图片，然后设定一个半径值，根据半径确定一个菜单图片运行的圆形轨迹，将图片看作圆形轨迹上的一个点，算出所有点下一时间在圆上的位置并将图片移动到该位置上，重复上面的移动过程，便实现了菜单的旋转，当然我们还会在旋转的过程中加入一些CSS滤镜效果，让旋转菜单看上去更加逼真。根据相同原理，我们还可以制作用于统计的圆形图饼等。
小知识：什么是CSS滤镜效果？
CSS滤镜主要是用来实现网页上图片的各种特殊效果的，如图片淡入淡出、图片翻转、图片阴影等，它对应的脚本特性为filter。虽然由于非IE浏览器对CSS滤镜支持不足，导致CSS滤镜只能在IE浏览器中能表现出较好的效果，但是仍不失为网页增加特效的好办法。
第一步：创建导航菜单
新建一个网页，在网页的<body></body>之间添加一个div，在该div中加入菜单图片并为div添加一个ID。相关代码如下所示：
第二步：设定菜单运行的圆形轨迹，计算各个菜单图片在圆上的位置
接下来我们需要确定菜单运行的圆形轨迹，根据半径值和图片的宽度计算出反正弦值，再根据该值的余弦我们便可以得到菜单图片在圆上对应的位置,在确定在圆上的位置的过程中，我们为菜单图片加入一些CSS滤镜效果，让旋转菜单看上去更加逼真。在<body></body>之间输入以下JavaScript代码：
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)';
}
if (ta<0){
ta=(ta+1)*80+20;
}else{
ta=100;
}
strFilter=strFilter+' alpha(opacity='+ta+')'; //透明效果（针对IE）
o.style.opacity=ta/100; //透明效果（针对非IE）
o.style.filter=strFilter; //在菜单图片上加入滤镜效果
}
d+=dv; //增加偏移值
}
第三步：重复菜单图片移动的过程，形成旋转效果
我们利用定时执行函数来重复执行菜单图片移动过程来达到菜单的旋转效果。紧接第二步的代码输入以下JavaScript代码：
function goR(){
var o=document.getElementById('imground');
var arrimg=o.getElementsByTagName('img');
for (var n=0;n
【文件预览】：
炫丽的旋转导航菜单
----round.html(3KB)
----roundCode.txt(3KB)
----round.doc(70KB)
----imgs()
--------img9.png(18KB)
--------img7.png(16KB)
--------img2.png(16KB)
--------img3.png(12KB)
--------img1.png(10KB)
--------Thumbs.db(37KB)
--------img4.png(15KB)
--------img8.png(17KB)
--------img5.png(14KB)
--------img6.png(12KB)
