純JS實(shí)現(xiàn)彈性導(dǎo)航條效果
更新時(shí)間：2017年03月06日 16:08:20 作者：shangpudxd
本文主要介紹了純JS實(shí)現(xiàn)彈性導(dǎo)航條效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0; padding:0; list-style:none;}
ul{ overflow:hidden; background:#ccc; width:574px; margin:100px auto; position:relative;}
ul li{ float:left; width:80px; height:40px; text-align:center; line-height:40px; border:1px solid #000; position:relative; z-index:2;}
#block_box{ position:absolute; top:0; left:0; background:#399; z-index:1;}
</style>
<script>
var left = 0;
var iSpeed = 0;
function move(obj,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
iSpeed+=(iTarget-left)/5;
iSpeed*=0.75;
left+=iSpeed;
obj.style.left = left+'px';
if(Math.round(iSpeed)==0&&Math.round(left)==iTarget){
clearInterval(obj.timer);
}
},30);
}
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var oBlock = document.getElementById('block_box');
var iNow = 0;
for(var i=0;i<aLi.length-1;i++){
;(function(index){
aLi[i].onmouseover = function(){
//oBlock.style.left = index*aLi[0].offsetWidth+'px';
move(oBlock,index*aLi[0].offsetWidth);
};
aLi[i].onmouseout = function(){
//oBlock.style.left = 0;
move(oBlock,iNow*aLi[0].offsetWidth);
};
aLi[i].onclick = function(){
iNow=index;
};
})(i);
}
};
</script>
</head>
<body>
<ul>
<li>首頁</li>
<li>CSS課程</li>
<li>JS課程</li>
<li>HTML5課程</li>
<li>視頻教程</li>
<li>課程案例</li>
<li>聯(lián)系方式</li>
<li id="block_box"></li>
</ul>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
本文介紹了腳本div實(shí)現(xiàn)拖放功能的兩種方法：1.原生拖放實(shí)現(xiàn)；2.jQuery UI draggable實(shí)現(xiàn)拖放。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
javascript中encodeURI和decodeURI方法使用介紹
encodeURI和decodeURI是成對(duì)來使用的，因?yàn)闉g覽器的地址欄有中文字符的話，可以會(huì)出現(xiàn)不可預(yù)期的錯(cuò)誤，所以可以encodeURI把非英文字符轉(zhuǎn)化為英文編碼，decodeURI可以用來把字符還原回來2013-05-05
ES2015 推出了JS 的 Promise ，而在沒有原生支持的時(shí)候，我們也可以使用諸如 Promises/A+ 的庫的幫助，在我們的代碼里實(shí)現(xiàn)Promise 的支持，下面這篇文章主要給大家介紹了如何從零開始利用js手寫一個(gè)Promise庫的相關(guān)資料，需要的朋友可以參考下。2018-04-04
這篇文章主要介紹了js實(shí)現(xiàn)div彈出層的方法,以實(shí)例的形式完整的實(shí)現(xiàn)了js彈出div層的效果,并且彈出層可拖拽、可關(guān)閉,用戶還可根據(jù)個(gè)人喜好自定義彈出層的顯示效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-11-11
從多次測試結(jié)果看來，使用StringBuffer 可以節(jié)省50%以上的時(shí)間2008-12-12
這篇文章主要介紹了Javascript中的Callback方法淺析,本文講解了什么是callback、Javscript Callback、Callback是什么、Callback實(shí)例等內(nèi)容,需要的朋友可以參考下2015-03-03
本文介紹了如何從?JavaScript?中的字符串中刪除子字符串，并提供了兩種常用的方法：replace()?方法和?split()?方法，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2023-05-05
打造通用的勻速運(yùn)動(dòng)框架(實(shí)例講解)
下面小編就為大家?guī)硪黄蛟焱ㄓ玫膭蛩龠\(yùn)動(dòng)框架(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
CocosCreator入門教程之用TS制作第一個(gè)游戲
這篇文章主要介紹了CocosCreator入門教程之用TS制作第一個(gè)游戲，對(duì)TypeScript感興趣的同學(xué)，一定要看一下2021-04-04
字節(jié)跳動(dòng)面試之如何用JS實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求控制
這篇文章主要給大家介紹了關(guān)于字節(jié)跳動(dòng)面試之如何用JS實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求控制的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05