超酷的一种菜单特效代码,网页特效

原创 2007年09月27日 16:10:00

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<title>酷酷菜单代码</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
var distance=0;distance1=0;
function move1()
{
if(distance!=50)
 {span1.style.pixelLeft+=1;span3.style.pixelLeft+=1;span5.style.pixelLeft+=1;span2.style.pixelLeft-=1;span4.style.pixelLeft-=1;span6.style.pixelLeft-=1;span1.filters.alpha.opacity+=2;span2.filters.alpha.opacity+=2;span3.filters.alpha.opacity+=2;span4.filters.alpha.opacity+=2;span5.filters.alpha.opacity+=2;span6.filters.alpha.opacity+=2;
midspan1.filters.alpha.opacity+=2;midspan2.filters.alpha.opacity+=2;midspan1.style.pixelTop+=1;midspan2.style.pixelTop-=1;
leftspan.filters.alpha.opacity+=2;rightspan.filters.alpha.opacity+=2;
censpan.filters.alpha.opacity-=1;
distance++;setTimeout('move1()',1);
 }else{move2();};
abovespan1.style.display='none';abovespan2.style.display='none';
}

function move2()
{
censpan.style.display='none';
if(distance1!=44)
{colspan1.style.pixelLeft+=1;colspan2.style.pixelLeft-=1;colspan3.style.pixelLeft+=1;colspan4.style.pixelLeft-=1;
rowspan1.style.pixelTop+=1;rowspan2.style.pixelTop+=1;rowspan3.style.pixelTop-=1;rowspan4.style.pixelTop-=1;rowspan5.style.pixelTop+=1;rowspan6.style.pixelTop+=1;rowspan7.style.pixelTop-=1;rowspan8.style.pixelTop-=1;
rowspan1.filters.alpha.opacity+=1;rowspan2.filters.alpha.opacity+=1;rowspan3.filters.alpha.opacity+=1;rowspan4.filters.alpha.opacity+=1;rowspan5.filters.alpha.opacity+=1;rowspan6.filters.alpha.opacity+=1;rowspan7.filters.alpha.opacity+=1;rowspan8.filters.alpha.opacity+=1;
colspan1.filters.alpha.opacity+=2;colspan2.filters.alpha.opacity+=2;colspan3.filters.alpha.opacity+=2;colspan4.filters.alpha.opacity+=2;
upspan1.style.pixelTop-=1;upspan2.style.pixelTop+=1;upspan1.filters.alpha.opacity+=2;upspan2.filters.alpha.opacity+=2;
spanA.style.pixelLeft-=1;spanB.style.pixelLeft+=1;spanA.filters.alpha.opacity+=2;spanB.filters.alpha.opacity+=2;
distance1++;
spanC.style.pixelLeft-=2;spanD.style.pixelLeft+=2;spanC.filters.alpha.opacity+=1;spanD.filters.alpha.opacity+=1;
setTimeout('move2()',1);}
}
//-->
</SCRIPT>
</head>
<body>
<span id=span1 style=filter:alpha(opacity=0);position:absolute;left:200;top:100;z-index:1;width:50;height:15;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;cursor:hand; onmouseover=this.style.background='306898';add1.style.display='block';midspan2.innerText="菜单一的主题";midspan1.innerText="ONE" onmouseout=this.style.background='orange';add1.style.display='none';midspan2.innerText="";>菜单一</span><br>
<span id=span2 style=filter:alpha(opacity=0);position:absolute;left:300;top:115;z-index:1;width:50;height:15;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;cursor:hand; onmouseover=this.style.background='306898';add2.style.display='block';midspan2.innerText="菜单二的主题";midspan1.innerText="TWO" onmouseout=this.style.background='orange';add2.style.display='none';midspan2.innerText="";>菜单二</span><br>
<span id=span3 style=filter:alpha(opacity=0);position:absolute;left:200;top:130;z-index:1;width:50;height:15;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;cursor:hand; onmouseover=this.style.background='306898';add3.style.display='block';midspan2.innerText="菜单三的主题";midspan1.innerText="THREE" onmouseout=this.style.background='orange';add3.style.display='none';midspan2.innerText="";>菜单三</span><br>
<span id=span4 style=filter:alpha(opacity=0);position:absolute;left:300;top:145;z-index:1;width:50;height:15;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;cursor:hand; onmouseover=this.style.background='306898';add4.style.display='block';midspan2.innerText="菜单四的主题";midspan1.innerText="FOUR" onmouseout=this.style.background='orange';add4.style.display='none';midspan2.innerText="";>菜单四</span><br>
<span id=span5 style=filter:alpha(opacity=0);position:absolute;left:200;top:160;z-index:1;width:50;height:15;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;cursor:hand; onmouseover=this.style.background='306898';add5.style.display='block';midspan2.innerText="菜单五的主题";midspan1.innerText="FIVE" onmouseout=this.style.background='orange';add5.style.display='none';midspan2.innerText="";>菜单五</span><br>
<span id=span6 style=filter:alpha(opacity=0);position:absolute;left:300;top:175;z-index:1;width:50;height:15;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;cursor:hand; onmouseover=this.style.background='306898';add6.style.display='block';midspan2.innerText="菜单六的主题";midspan1.innerText="SIX" onmouseout=this.style.background='orange';add6.style.display='none';midspan2.innerText="";>菜单六</span><br>
<span id=leftspan style=filter:alpha(opacity=0);position:absolute;left:191;top:100;width:60;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=rightspan style=filter:alpha(opacity=0);position:absolute;left:299;top:100;width:60;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=abovespan1 style=z-index:6;filter:alpha(opacity=0);position:absolute;left:191;top:100;width:60;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=abovespan2 style=z-index:6;filter:alpha(opacity=0);position:absolute;left:299;top:100;width:60;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=spanA style=z-index:-1;filter:alpha(opacity=0);position:absolute;left:221;top:110;width:20;height:71;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=spanB style=z-index:-1;filter:alpha(opacity=0);position:absolute;left:309;top:110;width:20;height:71;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=spanC style=z-index:-2;filter:alpha(opacity=0);position:absolute;left:251;top:120;width:20;height:51;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=spanD style=z-index:-2;filter:alpha(opacity=0);position:absolute;left:279;top:120;width:20;height:51;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=rowspan1 style=z-index:-1;filter:alpha(opacity=0);position:absolute;left:231;top:100;width:10;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=rowspan2 style=z-index:-1;filter:alpha(opacity=0);position:absolute;left:211;top:100;width:10;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=rowspan3 style=z-index:-1;filter:alpha(opacity=0);position:absolute;left:231;top:100;width:10;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=rowspan4 style=z-index:-1;filter:alpha(opacity=0);position:absolute;left:211;top:100;width:10;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=rowspan5 style=z-index:-1;filter:alpha(opacity=0);position:absolute;left:310;top:100;width:10;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=rowspan6 style=z-index:-1;filter:alpha(opacity=0);position:absolute;left:331;top:100;width:10;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=rowspan7 style=z-index:-1;filter:alpha(opacity=0);position:absolute;left:310;top:100;width:10;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=rowspan8 style=z-index:-1;filter:alpha(opacity=0);position:absolute;left:331;top:100;width:10;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=midspan1 style=filter:alpha(opacity=0);position:absolute;left:252;top:142;width:46;height:30;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=midspan2 style=filter:alpha(opacity=0);position:absolute;left:252;top:119;width:46;height:30;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=colspan1 style=z-index=-1;filter:alpha(opacity=0);position:absolute;left:252;top:199;width:60;height:10;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=colspan2 style=z-index=-1;filter:alpha(opacity=0);position:absolute;left:238;top:199;width:60;height:10;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=colspan3 style=z-index=-1;filter:alpha(opacity=0);position:absolute;left:252;top:77;width:60;height:10;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=colspan4 style=z-index=-1;filter:alpha(opacity=0);position:absolute;left:238;top:77;width:60;height:10;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;></span>
<span id=add1 style=filter:alpha(opacity=30);position:absolute;left:299;top:100;width:60;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;display:none;><br><br>菜单1内容</span>
<span id=add3 style=filter:alpha(opacity=30);position:absolute;left:299;top:100;width:60;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;display:none;><br><br>菜单3内容</span>
<span id=add5 style=filter:alpha(opacity=30);position:absolute;left:299;top:100;width:60;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;display:none;><br><br>菜单5内容</span>
<span id=add2 style=filter:alpha(opacity=30);position:absolute;left:191;top:100;width:60;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;display:none;><br><br>菜单2内容</span>
<span id=add4 style=filter:alpha(opacity=30);position:absolute;left:191;top:100;width:60;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;display:none;><br><br>菜单4内容</span>
<span id=add6 style=filter:alpha(opacity=30);position:absolute;left:191;top:100;width:60;height:91;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;display:none;><br><br>菜单6内容</span>
<span id=censpan style=filter:alpha(opacity=30);z-index:5;position:absolute;left:252;top:138;width:46;height:10;background:red;border-style:solid;border-width:1;text-align:center;font-size:9pt;cursor:hand; onclick=move1();>start</span>
<span id=upspan1 style=filter:alpha(opacity=0);z-index:-1;position:absolute;left:262;top:78;width:26;height:70;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;cursor:hand;></span>
<span id=upspan2 style=filter:alpha(opacity=0);z-index:-1;position:absolute;left:262;top:138;width:26;height:70;background:orange;border-style:solid;border-width:1;text-align:center;font-size:9pt;cursor:hand;></span>

</body>
</html>

 

ckplayer-超酷网页视频播放器的使用

现在网上做视频播放的很多,我就用过ckplayer这一款,虽然不知道别的播放器怎么样,但ckplayer还是比较不错的。调用简单、说明清晰、可扩展性很强,我老喜欢了。 当然引用人家的东西一定得去...
  • binyao02123202
  • binyao02123202
  • 2014年11月06日 12:32
  • 23341

html5+CSS3 飘带菜单 超酷3D菜单

http://www.html5tricks.com/css3-3d-ribbon-menu.html
  • boyit0
  • boyit0
  • 2014年11月01日 11:17
  • 678

C语言程序代码神奇效果如何运行

外行人看代码是很麻烦的事情,只能看到神奇的程序员biubiu几行代码就能搞出很神奇的效果。为什么程序员简单的几行代码就可以打印出我们想要的结果呢,下面这篇文章就介绍下C语言程序的运行过程。 ...
  • ccnanxi
  • ccnanxi
  • 2015年12月03日 16:42
  • 851

分享10 个超酷的 HTML5/CSS3 应用及源码

1、HTML5视频破碎重组特效,强大视觉冲击 HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击。点击视频任意地方,HTML5将...
  • yanghaonan7758
  • yanghaonan7758
  • 2017年05月02日 09:11
  • 669

8款超酷而实用的CSS3按钮动画

1、CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter、facebook、youtube等大型社交网站。每一个分享按钮都有个大社交网站的Logo...
  • yanghaonan7758
  • yanghaonan7758
  • 2017年05月02日 09:12
  • 187

8款超酷实用的CSS3 Tab菜单集合

1、CSS3华丽的Tab菜单 带小图标动画 之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单,结合SVG,Tab菜单实现非常灵活。今天我们要再来分享一款基于CSS3...
  • yanghaonan7758
  • yanghaonan7758
  • 2017年05月02日 09:13
  • 69

精选10款超酷的HTML5/CSS3菜单

今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧。 1、CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页...
  • mazegong
  • mazegong
  • 2017年06月12日 17:36
  • 517

HTML特效代码

HTML特效代码 3 1。忽视右键 3 2。加入背景音乐 3 3。简单的window.open方法 4 4。简单的页面加密 5 5。拉动页面时背景图不动 5 6。让浏览器在保存页面时保存失败 5 7。...
  • zhongxia245
  • zhongxia245
  • 2014年02月16日 14:51
  • 438

JS特效代码大全(七)超全的JS树形菜单共享

JS特效代码大全(七)超全的JS树形菜单共享 JS树形菜单是很常用的JS特效代码,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,...
  • hbqjzx
  • hbqjzx
  • 2014年09月08日 09:43
  • 5783

超酷随身碟在超酷价格

超酷随身碟在超酷价格 随身碟今天已成为不可缺少的,让你随身携带的文件,照片,演示文稿,音乐,电影在你的口袋里。除了这个,你可以启动你喜欢的节目不安装它们。今天,它是可以随身携带和使用随身碟等,ubun...
  • allisar1
  • allisar1
  • 2014年08月20日 18:03
  • 197
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:超酷的一种菜单特效代码,网页特效
举报原因:
原因补充:

(最多只允许输入30个字)