<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>
相关分类