利用javascript让导航栏响应伸缩

最新推荐文章于 2024-07-23 16:23:26 发布

blog_liuliang

最新推荐文章于 2024-07-23 16:23:26 发布

阅读量667

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 函数对象标签 dom

本文链接：https://blog.youkuaiyun.com/blog_liuliang/article/details/49281707

前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍了DOM操作中的getElementsByTagName()方法及setInterval()定时器的使用方法。getElementsByTagName()用于获取指定标签名的对象集合，而setInterval()则按指定周期执行函数。文章通过实例展示了如何结合这两种方法实现元素的动态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先了解到两个方法。第一个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.onload=function(){
      var s=document.getElementsByTagName("a");
      for(var i=0;i<s.length;i++)
      {
      	s[i].onmouseover=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].onmouseout=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>