纯JS实现弹性导航条效果
程序员文章站
2023-11-20 12:16:52
效果图：
代码如下：
效果图：
代码如下：
<!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>
<li id="block_box"></li>
</ul>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！