纯JS实现弹性导航条效果

网络编程 2021-07-04 19:20www.168986.cn编程入门

本文主要介绍了纯JS实现弹性导航条效果的实例，具有很好的参考价值。狼蚁网站SEO优化跟着长沙网络推广一起来看下吧

效果图

代码如下

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
<style>
{margin:0; padding:0; list-style:none;}
ul{ overflow:hidden; background:#c; 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; :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 = indexaLi[0].offsetWidth+'px';
  move(oBlock,indexaLi[0].offsetWidth);
  };
  aLi[i].onmouseout = function(){
  //oBlock.style.left = 0;
  move(oBlock,iNowaLi[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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望多多支持狼蚁SEO！

上一篇：jQuery滚动监听实现商城楼梯式导航效果下一篇：JS实现颜色动态淡化效果

纯JS实现弹性导航条效果

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

纯JS实现弹性导航条效果

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设