<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>橫向菜單</title>
<style>
*{margin:0;padding:0}
ul{
list-style:?none;
height:?50px;
border-bottom:?solid?5px?#F60;
}
li{
float:left;
margin-top:20px;
}
a{
text-decoration:?none;
display:?block;
height:30px;
width:?120px;
line-height:?30px;
margin-bottom:?1px;
text-align:?center;
background:?lightgrey;
}
.on,a:hover{
color:white;
background:?orangered;
height:30px;
width:120px;
line-height:30px;
}
</style>
<script>
window.onload=function(){
var?A=document.getElementsByTagName('a');
for(var?i=0;i<A.length;i++)
{
var?This=this;
A[i].onmouseover=function(){
setInterval(function(){
This.style.width=This.offsetWidth+8+"px";
},30);
}
}
}
</script>
</head>
<body>
<ul>
<li><a?class="on"?href="#">首????????頁(yè)</a></li>
<li><a?href="#">新聞快訊</a></li>
<li><a?href="#">產(chǎn)品展示</a></li>
<li><a?href="#">售后服務(wù)</a></li>
<li><a?href="#">聯(lián)系我們</a></li>
</ul>
</body>
</html>
2016-05-22
var?This=this;寫在onmouseover里面