<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body,ul{margin: 0;padding: 0;} li{list-style: none;} a{text-decoration: none;} .clear{zoom:1;} .clear:after{content: "";display: block;clear: both;} .wrap{margin: 30px auto;width: 1000px;height: 40px;} .list li{float: left;height: 40px;display: list-item;} .list li a{float: left;font-size: 14px;position: relative;overflow: hidden;height: 40px;color:#e0e03a;} .list li a strong{float: left;height: 40px} .list li a span{float:left; padding:0 20px; height:40px; line-height:40px; background:#900; clear:both; } </style> <script> window.onload=function() { var oDiv=document.getElementById('list'); var aStrong=oDiv.getElementsByTagName('strong'); var aA=oDiv.getElementsByTagName('a'); var iTarget=oDiv.getElementsByTagName('li')[0].offsetHeight; for(var i=0; i<aStrong.length; i++) { //aA[i].style.width=aStrong[i].style.width=aStrong[i].getElementsByTagName('span')[0].offsetWidth+'px'; aStrong[i].style.position='relative'; aStrong[i].style.top=aStrong[i].style.left=0; aStrong[i].onmouseover=function() { startMove(this, -iTarget); }; aStrong[i].onmouseout=function() { startMove(this, 0); }; } }; function startMove(obj,target) { clearInterval(obj.iTime); obj.iTime=setInterval(function(){ if(obj.offsetTop==target) { clearInterval(obj.iTime); } else { var iSpeed=(target-obj.offsetTop)/10; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); obj.style.top=obj.offsetTop+iSpeed+'px'; } }, 30); } </script> </header> <body> <div class="wrap"> <ul id="list" class="list clear"> <li><a href="#"> <strong> <span>首页</span> <span>首页</span> </strong> </a></li> <li><a href="#"> <strong> <span>前端开发教程</span> <span>前端开发教程</span> </strong> </a></li> <li><a href="#"> <strong> <span>妙味视频教程</span> <span>妙味视频教程</span> </strong> </a></li> <li><a href="#"> <strong> <span>周末班上课安排</span> <span>周末班上课安排</span> </strong> </a></li> <li><a href="#"> <strong> <span>结课标准</span> <span>结课标准</span> </strong> </a></li> <li><a href="#"> <strong> <span>联系妙味</span> <span>联系妙味</span> </strong> </a></li> </ul> </div> </body> </html>
