Other_1.利用JS伸缩变动导航栏宽度的效果。_border-bottom 变窄-优快云博客

本文介绍了一种使用JavaScript实现的导航栏伸缩效果。通过鼠标悬停和离开事件，可以使导航栏项宽度动态变化。但存在快速切换时显示不流畅的问题。

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

该教程是我从慕课网上学习到的，觉得对初学JS有比较好的帮助。这是利用JS的循环语句和鼠标经过、鼠标离开时间写的。但是有一个BUG就是，效果不够流畅，当用户快速在导航栏之间切换的时候，很容易会出现文字变成竖型排列，而不是横向排列。

<html>

<head>

<meta charset="utf-8">

<title>JS伸缩变动导航栏效果</title>

<style>

*{margin: 0;padding: 0;text-decoration: none;list-style: none;}

nav{width: 100%;height: 40px;border-bottom: 10px solid #FC751B;}

nav ul{margin:20px 0 0 20px;width: 800px;}

nav ul li{float: left;height: 40px;margin-right: 5px;background: #EAEAEA;line-height: 30px;}

nav ul li a{display: block;width: 120px;height: 30px;color:#000;text-align: center;padding:5px 0}

nav ul li a:hover{background: #FC751B;color:#fff;}

</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>=160) {

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<=120) {

This.offsetWidth="120px";

clearInterval(This.time);

}

},30)

}

}

}

</script>

</head>

<body>

<div class="box">

<nav>

<ul>

<li><a href="#">首　　页</a></li>

<li><a href="#">新闻快讯</a></li>

<li><a href="#">产品展示</a></li>

<li><a href="#">售后服务</a></li>

<li><a href="#">联系我们</a></li>

</ul>

</nav>

</div>

</body>

</html>

原状态：

变动效果：鼠标所碰到的导航栏会被撑开