<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏的制作</title>
<style>
*{margin:0 ;padding: 0; font-size: 15px}
ul{
list-style: none;
margin-right: 5px;
margin-top: 50px;
}
li{float:left;}
a{
text-decoration: none;
display: block;
width: 70px;
height: 20px;
text-align: center;
background-color: #ccc;
border: 2px solid black;
padding: 5px 2px;
}
.on,a:hover{background: yellow; color:green; height:30px; line-height: 30px; margin-top: -10px;}
</style>
<script>
window.onload=function()
{
var aA=document.getElementsByTagName("a");
for(var i=0;i<aA.length;i++)
{
aA[i].onmouseover=function(){
clearInterval(this.time);
var This=this ;
This.time=setInterval(function(){
This.style.width=This.offsetWidth+8+"px";
if(This.offsetWidth>=100){
clearInterval(This.time)
}
},30)
}
aA[i].onmouseout=function(){
clearInterval(this.time);
var This=this ;
This.time=setInterval(function(){
This.style.width=This.offsetWidth-8+"px";
if(This.offsetWidth<=70){
This.style.width = "70px";
clearInterval(This.time)
}
},30)
}
}
}
</script>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
</ul>
<ul>
<li><a href="#">新闻快讯</a></li>
</ul>
<ul>
<li><a href="#">产品展示</a></li>
</ul>
<ul>
<li><a href="#">意见反馈</a></li>
</ul>
<ul>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
添加回答
举报
0/150
提交
取消