溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹js怎么實現帶緩動動畫的導航欄效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
ul,li { padding: 0; margin: 0; }
li { list-style: none; }
#box{
height: 48px;
width: 900px;
background-color: #459DF5;
margin: 50px auto;
position: relative;
}
#caution {
width: 150px;
height: 48px;
background-color: #4B92D8;
position: absolute;
top: 0;
left: 0;
}
#list {
position: absolute;
}
#list li {
width: 150px;
height: 48px;
float: left;
color: #fff;
font: 500 20px/48px "微軟雅黑";
text-align: center;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
//獲取ul ID
var oUl = document.getElementById("list");
// 獲取span ID
var caution = document.getElementById("caution");
//獲取ul 所有孩子
var aLi = oUl.children;
//定時器管理
var timer = null;
//緩動
var leader = 0;
var target = 0;
//停留
var current = 0;
for(var i = 0;i<aLi.length;i++){
//鼠標移動
aLi[i].onmouseover = function(){
//關閉定時器
clearInterval(timer);
//獲取當前的left值
target = this.offsetLeft;
//開啟定時器
timer = setInterval(autoCaution,20);
}
//鼠標點擊
aLi[i].onmousedown = function(){
//清楚所有高亮的文字
for(var j = 0;j<aLi.length;j++){
aLi[j].style.color = "#fff";
}
//當前點擊欄變為紅色
this.style.color = "#ccc";
//提示框
current = this.offsetLeft;
caution.style.left = current+"px";
}
}
//鼠標離開
oUl.onmouseout = function(){
//關閉定時器
clearInterval(timer);
target = current;
timer = setInterval(autoCaution,20);
}
//緩動動畫
function autoCaution(){
leader = leader +(target - leader) /10;
caution.style.left = leader+"px";
}
}
</script>
</head>
<body>
<div id="box">
<span id="caution"></span>
<ul id="list">
<li>首頁</li>
<li>公司簡介</li>
<li>企業文化</li>
<li>招賢納士</li>
<li>企業論壇</li>
</ul>
</div>
</body>
</html>以上是“js怎么實現帶緩動動畫的導航欄效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
