导航条的制作——水平伸缩 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>导航菜单</title>
 6 <style type="text/css">
 7 * { margin: 0; padding: 0; font-size: 14px; }
 8 a { color: #333; text-decoration: none }
 9 ul { list-style: none; height: 30px; border-bottom: 5px solid #F60; margin-top: 20px; padding-left: 50px; }
10 ul li { float: left }
11 ul li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }
12 a.on, a:hover { background: #F60; color: #fff; }
13 </style>
14 <script>
15 window.onload=function(){
16     var aA=document.getElementsByTagName('a');
17     for(var i=0; i<aA.length; i++){
18         aA[i].onmouseover=function(){
19             var This=this;
20             clearInterval(This.time);
21             This.time=setInterval(function(){
22                     This.style.width=This.offsetWidth+8+"px";
23                     if(This.offsetWidth>=160)
24                     clearInterval(This.time);
25                 },30)
26         }
27         aA[i].onmouseout=function(){
28                 clearInterval(this.time);
29                 var This=this;
30                 this.time=setInterval(function(){
31                     This.style.width=This.offsetWidth-8+"px";
32                     if(This.offsetWidth<=120){
33                         This.style.width='120px';
34                         clearInterval(This.time);
35                     }
36                 },30)
37         }
38     }
39 }
40 </script>
41 </head>
42 <body>
43 <ul>
44     <li><a class="on" href="#">首　　页</a></li>
45     <li><a href="#">新闻快讯</a></li>
46 <li><a href="#">产品展示</a></li>
47     <li><a href="#">售后服务</a></li>
48     <li><a href="#">联系我们</a></li>
49 </ul>
50 </body>
51 </html>
View Code

 

posted @ 2016-11-29 16:52  mumakiss  阅读(94)  评论(0)    收藏  举报