js實現(xiàn)帶緩動動畫的導(dǎo)航欄效果
更新時間：2017年01月16日 11:12:38 作者：漫步未來
本篇文章主要分享了js實現(xiàn)帶緩動動畫的導(dǎo)航欄效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧
話不多說，請看實例代碼：
<!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(){
//關(guān)閉定時器
clearInterval(timer);
//獲取當(dāng)前的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";
}
//當(dāng)前點擊欄變?yōu)榧t色
this.style.color = "#ccc";
//提示框
current = this.offsetLeft;
caution.style.left = current+"px";
}
}
//鼠標離開
oUl.onmouseout = function(){
//關(guān)閉定時器
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>企業(yè)文化</li>
<li>招賢納士</li>
<li>企業(yè)論壇</li>
</ul>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)下拉菜單切換效果，篩選條件功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了什么是JavaScript的防抖與節(jié)流,防抖是在頻繁觸發(fā)某一個事件時，一段時間內(nèi)不再觸發(fā)該事件后才會去調(diào)用對應(yīng)的回調(diào)函數(shù)，在設(shè)定間隔時間內(nèi)如果下一次事件被觸發(fā)， 那么就重新開始定時器，直到事件觸發(fā)結(jié)束，節(jié)流看下面文章的具體介紹吧2021-12-12
正則中的回溯定義與用法分析【JS與java實現(xiàn)】
這篇文章主要介紹了正則中的回溯定義與用法,結(jié)合實例形式分析了回溯的概念、功能并提供了JS與java實現(xiàn)方法,需要的朋友可以參考下2016-12-12
最近對eval火爆的討論，教主 @Franky 和 灰大 @otakustay 也給了精彩的數(shù)據(jù)分析,剛好之前也做過類似的測試，我也跟風(fēng)湊個熱鬧，提供兩組數(shù)據(jù)供大家參考2012-08-08
這篇文章主要介紹了JavaScript數(shù)組對象賦值用法,涉及javascript用戶交互及針對數(shù)組的排序技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)圖片輪播切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JS動態(tài)顯示表格上下frame的方法,涉及javascript中顯示表格frame的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)無縫滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
jsonp跨域及實現(xiàn)百度首頁聯(lián)想功能的方法
這篇文章主要介紹了jsonp跨域及實現(xiàn)百度首頁聯(lián)想功能的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了微信小程序項目實踐之主頁tab選項實現(xiàn),本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細，需要的朋友可以參考下2018-07-07