通过js实现的简单的菜单动画效果

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7     *{margin:0;padding:0;font-size:14px;}
 8     ul{list-style:none;margin-left:5px;}
 9     li{float:left;margin-top:20px;}
10     a{text-decoration: none;display: block;width:90px;height:30px;line-height:30px;background-color:#f60;margin-right:5px;text-align: center;color: #000000;}
11     a:hover{color:#fff;background-color:#f60;height:35px;margin-top: -5px;line-height: 35px;}
12     </style>
13     <script type="application/javascript" language="JavaScript">
14         window.onload=function(){
15             var aA=document.getElementsByTagName("a");
16             for(var i=0;i<aA.length;i++) {
17                 //对每个标签进行js动画注入
18                 aA[i].onmouseover = function () {
19                     clearInterval(this.time);//使得动画不重叠
20                     var This = this;
21                     This.time = setInterval(function () {//js的动画函数,setInterval
22                         //offsetWidth当前宽度
23                         This.style.width = This.offsetWidth + 8 + "px";
24                         if (This.offsetWidth >= 160) {//当前宽度大于160时,停止增加宽度
25                             clearInterval(This.time);
26                         }
27                     }, 30)
28                 };
29                 aA[i].onmouseout = function () {
30                     clearInterval(this.time);
31                     var This = this;
32                     This.time = setInterval(function () {
33                         This.style.width = This.offsetWidth - 8 + "px";
34                         if (This.offsetWidth <= 100) {//当前宽度等于原来的宽度时,设置宽度不再减小
35                             This.style.width="100px";
36                             clearInterval(This.time);
37                         }
38                     }, 30)
39                 }
40             }
41         }
42     </script>
43 </head>
44 <body>
45 <ul>
46     <li><a href="#">File</a></li>
47     <li><a href="#">Edit</a></li>
48     <li><a href="#">View</a></li>
49     <li><a href="#">Navigate</a></li>
50 </ul>
51 
52 </body>
53 </html>

在制作菜单样式的时候要说明的一点是:如果要给水平菜单增加整体背景,则必须要对<li>标签设置宽高,否则<li>浮动后,脱离文档流 ,会导致<ul>失去高度和宽度,如果要给<ul>进行整体北京设置,首先要给<ul>定义宽、高

你可能感兴趣的:(通过js实现的简单的菜单动画效果)