Other_1.利用JS伸縮變動導航欄寬度的效果。

2024-04-27 15:14:19

字體：大中小

來源：轉載

供稿：網友

該教程是我從慕課網上學習到的，覺得對初學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>
原狀態：
變動效果：鼠標所碰到的導航欄會被撐開