开发工具:
文件大小: 202kb
下载次数: 0
上传时间: 2013-03-08
详细说明：
网络模仿秀 你是不是看到别人的网站和社区的亮点功能很心动？想把它们搬进自己的网站或社区中吗？你是不是在网上看到新奇或热门的新功能，想自己模仿设计一下？来我们的“网络模仿秀”瞧瞧，一定有你想要的！如果你有什么网络功能的需求，请发信给我们，电子信箱：pcw-chendx@vip.sina.com。 小力特别喜欢一些新奇的网站功能，今天在逛一个国外网站的时候，发现它上面的导航菜单是不停旋转的，非常的炫，但是如何把这个菜单应用到自己的网站上呢? 个性化网站必备—炫丽的旋转导航菜单 现在网站大都采用平面的导航菜单，一旦菜单项目太多，而网页版面有限，便显得菜单特别拥挤，针对这种情况，我们来制作一款三维旋转导航菜单，它不仅有效的节约了版面，还能彰显网站的个性。首先我们来创建导航菜单，添加一个div，在该div中加入菜单图片，然后设定一个半径值，根据半径确定一个菜单图片运行的圆形轨迹，将图片看作圆形轨迹上的一个点，算出所有点下一时间在圆上的位置并将图片移动到该位置上，重复上面的移动过程，便实现了菜单的旋转，当然我们还会在旋转的过程中加入一些CSS滤镜效果，让旋转菜单看上去更加逼真。根据相同原理，我们还可以制作用于统计的圆形图饼等。 小知识： 什么是CSS滤镜效果？ CSS滤镜主要是用来实现网页上图片的各种特殊效果的，如图片淡入淡出、图片翻转、图片阴影等，它对应的脚本特性为filter。虽然由于非IE浏览器对CSS滤镜支持不足，导致CSS滤镜只能在IE浏览器中能表现出较好的效果，但是仍不失为网页增加特效的好办法。 第一步：创建导航菜单 新建一个网页，在网页的之间添加一个div，在该div中加入菜单图片并为div添加一个ID。相关代码如下所示： 第二步：设定菜单运行的圆形轨迹，计算各个菜单图片在圆上的位置 接下来我们需要确定菜单运行的圆形轨迹，根据半径值和图片的宽度计算出反正弦值，再根据该值的余弦我们便可以得到菜单图片在圆上对应的位置,在确定在圆上的位置的过程中，我们为菜单图片加入一些CSS滤镜效果，让旋转菜单看上去更加逼真。在之间输入以下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
(系统自动生成,下载前可以参看下载内容)
下载文件列表
相关说明
- 本站资源为会员上传分享交流与学习,如有侵犯您的权益,请联系我们删除.
- 本站是交换下载平台，提供交流渠道，下载内容来自于网络，除下载问题外，其它问题请自行百度。
- 本站已设置防盗链，请勿用迅雷、QQ旋风等多线程下载软件下载资源，下载后用WinRAR最新版进行解压.
- 如果您发现内容无法下载，请稍后再次尝试；或者到消费记录里找到下载记录反馈给我们.
- 下载后发现下载的内容跟说明不相乎，请到消费记录里找到下载记录反馈给我们，经确认后退回积分.
- 如下载前有疑问，可以通过点击"提供者"的名字，查看对方的联系方式，联系对方咨询.
