javascript实现超炫的向上滑行菜单实例
本文实例讲述了javascript实现超炫的向上滑行菜单。分享给大家供大家参考。具体如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <title>JS实现文字上下滑动导航</title> <styletype="text/css"> body{margin:0;background:#66FF99;} ul{padding-left:0;margin:0;} li{list-style:none;} #nav{height:40px;background:#900;margin-top:50px;} #navul{width:240px;height:40px;margin:0auto;} #navli{height:40px;width:240px;} #nava{float:left;width:240px;position:relative;height:40px;overflow:hidden;font-size:14px;color:#e0e03a;text-decoration:none;cursor:pointer;} #navstrong{float:left;width:240px;} #navspan{float:left;width:200px;padding:020px;height:40px;line-height:40px;background:#900;clear:both;white-space:nowrap;} #nav.active,#nav.currentspan{background:#600;color:#fff;} #nav.current.active{color:#e0e03a;} </style> <script> window.onload=function() { varoDiv=document.getElementById('nav'); varaStrong=oDiv.getElementsByTagName('strong'); varaA=oDiv.getElementsByTagName('a'); variTarget=oDiv.getElementsByTagName('li')[0].offsetHeight; for(vari=0;i<aStrong.length;i++) { aA[i].style.width=aStrong[i].style.width=aStrong[i].getElementsByTagName('span')[0].offsetWidth+'px'; aStrong[i].style.position='absolute'; aStrong[i].style.top=aStrong[i].style.left=0; aStrong[i].onmouseover=function() { startMove(this,-iTarget); }; aStrong[i].onmouseout=function() { startMove(this,0); }; } }; functionstartMove(obj,target) { clearInterval(obj.iTime); obj.iTime=setInterval(function(){ if(obj.offsetTop==target) { clearInterval(obj.iTime); } else { variSpeed=(target-obj.offsetTop)/4; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); obj.style.top=obj.offsetTop+iSpeed+'px'; } },30); } </script> </head> <body> <divid="nav"> <ul> <liclass="current"> <ahref="#"> <strong> <span>首页</span> <spanclass="active">首页</span> </strong> </a> </li> <li> <ahref="#"> <strong> <span>前端开发课程</span> <spanclass="active">前端开发课程</span> </strong> </a> </li> <li> <ahref="#"> <strong> <span>妙味视频教程</span> <spanclass="active">妙味视频教程</span> </strong> </a> </li> <li> <ahref="#"> <strong> <span>周末班上课安排</span> <spanclass="active">周末班上课安排</span> </strong> </a> </li> <li> <ahref="#"> <strong> <span>结课标准</span> <spanclass="active">结课标准</span> </strong> </a> </li> <li> <ahref="#"> <strong> <span>联系妙味</span> <spanclass="active">联系妙味</span> </strong> </a> </li> </ul> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。