首页 > 网络编程 > JavaScript > 网页特效 > 导航菜单 > javascript 弹性菜单 javascript 弹性菜单，垂直的那种 2008-12-30 00:06:33 作者： javascript 垂直弹性菜单 <html> <head> <style type="text/css"> body {cursor:hand; margin:0; padding:0; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%;} .link {position:absolute;left:0;width:100%;height:0;background:#000;overflow:hidden;visibility:hidden;} .title {position:relative;cursor:pointer;background:#FF6600;width:100%;color:#fff;font-family:trebuchet MS;verdana;font-size:11px;left:2;height:15;overflow:hidden;} .title_o {position:relative;cursor:pointer;background:#fff;width:100%;color:#000;font-family:trebuchet MS;verdana;font-size:11px;left:2;height:15;overflow:hidden;} .text {position:relative;text-align:justify;margin:10px;font-family:trebuchet MS;verdana;font-size:11px;color:#FFF;overflow:hidden;height:90%} .fernando { font-family: "Trebuchet MS", Geneva, Arial, Helvetica, san-serif; font-size: 16px; font-weight: bolder} .mafra { } </style> <script type="text/javascript"><!-- var object = new Array(); function Slide(N,oCont){ this.N = N; this.S = 1.1; this.object = new Array(); this.CObj = function (parent,N){ this.parent = parent; this.N = N; this.obj = parent.frm[N]; this.tit = this.obj.firstChild; this.div = this.obj.getElementsByTagName("div")[1]; this.div.style.visibility = "hidden"; this.y0 = N * 18; this.Y1 = this.y0; this.obj.style.top = this.y0; this.obj.style.height = parent.H - (parent.NF-1) * 18 - 3; this.obj.style.visibility = "visible"; this.obj.parent = this; this.run = false; this.move = function(){ with(this){ dy = (y1-y0)/parent.S; if(Math.abs(dy)>.1){ y0+=dy; obj.style.top = Math.round(y0); setTimeout("object["+parent.N+"].object["+N+"].move();", 16); } else { run = false; if(dy>0)div.style.visibility="hidden"; else if(N>0)parent.object[N-1].div.style.visibility="hidden"; } } } this.obj.onmouseover = function(){ with(this.parent){ if(!run){ run = true; div.style.visibility="visible"; for(i=0;i<parent.NF;i++)parent.object[i].tit.className = "title"; tit.className = "title_o"; for(i=0;i<=N;i++){ parent.object[i].y1 = i*18; parent.object[i].move(); } for(i=N+1;i<parent.NF;i++){ parent.object[i].y1 = parent.H-(parent.NF-i)*18; parent.object[i].move(); } } } } } this.frm = document.getElementById(oCont); this.H = parseInt(this.frm.style.height); this.frm = this.frm.getElementsByTagName("span"); this.NF = this.frm.length; for(i=0;i<this.NF;i++) this.object[i] = new this.CObj(this, i); this.object[0].obj.onmouseover(); this.S = 10; } onload = function() { object[0] = new Slide(0, "frames"); } //--> </script> </head> <body bgcolor="#333333"> <div style="position:absolute;left:50%;top:50%"> <div id="frames" style="position:absolute;width:200;height:340;left:-100;top:-180;overflow:hidden"> <span class="link"> <div class="title"></div> <div style="position:relative;text-align:center;margin:0px;font-family:trebuchet MS; verdana;font-size:29px;font-weight:bold;color:#FFF;overflow:hidden;height:120%"> <a href="http://www.mafra.fot.br/photos/alimentos.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_logo_home.gif" width="191" height="189" border="0"></a> </div> </span> <span class="link"> <div class="title"><b> alimentos /<i> food</i></b></div> <div class="text"> <a href="http://www.mafra.fot.br/photos/alimentos.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_home-01.jpg" width="183" height="174" border="0"></a> </div> </span> <span class="link"> <div class="title"><b> bebidas /<i> drinks</i></b></div> <div class="text"> <a href="http://www.mafra.fot.br/photos/bebidas.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_home-02.jpg" width="183" height="174" border="0"></a> </div> </span> <span class="link"> <div class="title"><b> joias /<i> jewels</i></b></div> <div class="text"> <a href="http://www.mafra.fot.br/photos/joias.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_home-03.jpg" width="183" height="174" border="0"></a> </div> </span> <span class="link"> <div class="title"><b> natureza /<i> nature</i></b></div> <div class="text"> <a href="http://www.mafra.fot.br/photos/natureza.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_home-04.jpg" width="183" height="174" border="0"></a> </div> </span> <span class="link"> <div class="title"><b> gente /<i> people</i></b></div> <div class="text"> <a href="http://www.mafra.fot.br/photos/pessoas.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_home-05.jpg" width="183" height="174" border="0"></a> </div> </span> <span class="link"> <div class="title"><b> produtos /<i> products</i></b></div> <div class="text"> <a href="http://www.mafra.fot.br/photos/produtos.htm" target="_self" onFocus="if(this.blur)this.blur()"><img src="http://www.mafra.fot.br/photos/images/img_home-06.jpg" width="183" height="174" border="0"></a> </div> </span> <span class="link"> <div class="title"><b> contato /<i> contact</i></b></div> <div style="position:relative;text-align:center;margin:0px;font-family:verdana;font-size:32px;font-weight:bold;color:#FFF;overflow:hidden;height:90%"> <a href="mailto:mafra@mafra.fot.br?Subject=Contato - Contact"><img src="http://www.mafra.fot.br/photos/images/img_assina_home.gif" width="191" height="189" border="0"></a> </div> </span> <span class="link"> <div class="title"><b> contato /<i> contact</i></b></div> <div style="position:relative;text-align:center;margin:0px;font-family:verdana;font-size:32px;font-weight:bold;color:#FFF;overflow:hidden;height:90%"> <a href="mailto:mafra@mafra.fot.br?Subject=Contato - Contact"><img src="http://www.mafra.fot.br/photos/images/img_assina_home.gif" width="191" height="189" border="0"></a> </div> </span> </div> </div> <div style="position:relative; text-align:center; margin:0px; font-family:verdana; font-size:9px; font-weight:normal; color:#999999; overflow:hidden; height:131px; left: 414px; top: 474px; width: 172px;"> </div> <script type="text/javascript"> _uacct = "UA-1182901-1"; urchinTracker(); </script> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:javascript弹性运动效果简单实现方法JS运动相关知识点小结(附弹性运动示例)JavaScript拖拽、碰撞、重力及弹性运动实例分析纯js模拟div层弹性运动的方法JS实现弹性漂浮效果的广告代码js左右弹性滚动对联广告代码分享一个简单的弹性返回顶部JS代码实现介绍js运动动画的八个知识点JS实现匀速运动的代码实例使用JavaScript 实现对象 匀速/变速运动的方法用JavaScript玩转游戏物理(一)运动学模拟与粒子系统JS弹性运动实现方法分析
