<title>导航菜单</title><style type="text/css"> *{margin:0;padding:0;font-size:14px;} a{color:#333;text-decoration:none;} ul{list-style:none;height:30px;border-bottom:5px solid #F60;margin-top:20px;padding-left:50px;} ul li{float:left;} ul li a{text-align:center;display:block;background:#efefef;height:30px;width:120px;line-height:30px;margin-left:1px;} a.on, a:hover{background:#f60;color:#fff;}</style><script> window.onload=function(){ var aA=document.getElementsByTagName("a"); aA[i].timer=null; for(var i=0;i<aA[i].length;i++){ aA[i].onmouserover=function(){ startMove(this,160); } aA[i].onmouserout=function(){ startMove(this,120); } }};function startMove(obj,iTarget){ var aA=document.getElementsByTagName("a"); clearInterval(obj.timer);obj.time=setInterval(function(){ var speed=(iTarget-obj.offsetWidth)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==iTarget){ clearInterval(obj.timer); } else{obj.style.width=obj.offsetWidth+speed+"px";}},30);};</script><body><ul> <li ><a class="on" href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li></ul></body></html>
添加回答
举报
0/150
提交
取消