利用javascript让导航栏响应伸缩

首先了解到两个方法。第一个Dom有关的<span style="font-family: Arial; font-size: 14px; line-height: 26px;">getElementsByTagName() 方法可返回带有指定标签名的对象的集合。例如li、a等等。</span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-family: Arial; font-size: 14px; line-height: 26px;">getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。</span>
</span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-family: Arial; font-size: 14px; line-height: 26px;">第二个就是一个函数 setinterval（function（），30）。</span></span>

<span style="font-family: Arial; font-size: 14px; line-height: 26px;"><span style="font-family: Arial; font-size: 14px; line-height: 26px;"></span></span><h2 style="margin: 0px; padding: 0px; border: 0px; font-family: 微软雅黑; font-size: 14px; background-color: rgb(249, 249, 249);">定义和用法</h2><p style="margin-top: 12px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; border: 0px; line-height: 18px; font-family: Verdana, Arial, 宋体; background-color: rgb(249, 249, 249);">setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。</p><p style="margin-top: 12px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; border: 0px; line-height: 18px; font-family: Verdana, Arial, 宋体; background-color: rgb(249, 249, 249);">setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。</p><h3 style="margin: 20px 0px 0px; padding: 0px; border: 0px; font-size: 12px; font-family: Verdana, Arial, 宋体; background-color: rgb(249, 249, 249);">语法</h3><pre style="margin-top: 10px; margin-bottom: 0px; padding: 10px; border: 1px dotted rgb(119, 136, 85); font-family: Consolas, 'Courier New', Courier, monospace; width: 685px; background: rgb(245, 245, 245);">setInterval(code,millisec[,"lang"])

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

<script>
      window.οnlοad=function(){
      var s=document.getElementsByTagName("a");
      for(var i=0;i<s.length;i++)
      {
      	s[i].οnmοuseοver=function(){
      		var This=this;
      		clearInterval(This.time);
      		This.time=setInterval(turnlong(),30)

<pre name="code" class="javascript">                       turnlong(){
      			This.style.width=This.offsetWidth+8+"px";
      			if(This.offsetWidth>=160){
      				
      				clearInterval(This.time)
      			}
      		}

} s[i].οnmοuseοut=function(){ var This=this; This.time=setInterval(turnback(),30)

                 <pre name="code" class="javascript">                      turnback(){
      			This.style.width=This.offsetWidth-8+"px";
      			if(This.offsetWidth<=120){
      				This.style.width="120px";
      				clearInterval(This.time);
      			}
      		}

      	}
      }
  }
     </script>