純JS實現(xiàn)彈性導航條效果
更新時間：2017年03月06日 16:08:20 作者：shangpudxd
本文主要介紹了純JS實現(xiàn)彈性導航條效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!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)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要為大家介紹了如何通過JavaScript實現(xiàn)計算器的四則運算功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起動手試試2022-02-02
本文主要介紹了JavaScript去除字符串兩端空格的三種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
console一定是各位前端最熟悉的小伙伴了,有些網(wǎng)站還會在控制臺輸出一些有意思的東西,下面這篇文章主要給大家介紹了關于前端console用法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08
本文通過案例給大家介紹了JavaScript fetch接口,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了ES6 Set結構的應用,結合實例形式分析了ES6 set結構的功能、特點、常見用法及相關操作注意事項,需要的朋友可以參考下2019-06-06
JavaScript實現(xiàn)二叉樹定義、遍歷及查找的方法詳解
這篇文章主要介紹了JavaScript實現(xiàn)二叉樹定義、遍歷及查找的方法,結合實例形式較為詳細的分析了二叉樹的相關概念及javascript構建二叉樹、遍歷、查找二叉樹的常用操作技巧,需要的朋友可以參考下2017-12-12
HTML在線編輯器的基本概念與相關資料...2007-03-03
上次，我講了有關類型區(qū)別和傳遞的問題，現(xiàn)在，我給大家在插上一點有關類型賦值的問題。2011-07-07
layui前端框架之table表數(shù)據(jù)的刷新方法
今天小編就為大家分享一篇layui前端框架之table表數(shù)據(jù)的刷新方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JS前端解壓zip的方法和技巧,業(yè)務中有時候需要獲取某個 zip 壓縮包內(nèi)的文件內(nèi)容展示到前端,在 zip 包體積不是那么大的時候并且不涉及壓縮包解密的時候,可以考慮純前端方案,需要的朋友可以參考下2024-03-03