js实现带简单弹性运动的导航条

2019-11-19 17:27:01

字体：大中小

来源：转载

供稿：网友

晚上跟着视频敲了下弹性菜单的代码，先记下来

效果如下：

代码如下：

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{  margin:0;  padding:0; } .ul1{  width:450px;  height:30px;  margin:20px auto;  position:relative; } li{  list-style:none;  line-height:30px;  height:30px;  width:100px;  color:orange;  text-align:center;  float:left;  margin-right:5px;  border:1px soli #000;  background-color:red; } .mark{  position:absolute;  left:0;  top:0;  overflow:hidden; } .mark ul{  width:450px;  position:absolute;  left:0;  top:0; } .mark ul li{  color:#fff;  background-color:deepskyblue; } </style></head><body><ul class="ul1"> <li class="mark"> <ul>  <li>首页</li>  <li>论坛</li>  <li>视频</li>  <li>课程</li> </ul> </li> <li class="box">首页</li> <li class="box">论坛</li> <li class="box">视频</li> <li class="box">课程</li></ul></body><script> window.onload = function(){ var oMark = document.querySelector('.mark'); var oBox = document.querySelectorAll('.box'); var childUl = oMark.querySelector('ul'); var timer = null; var timer2 = null;//延迟定时器，100毫秒人的眼睛是察觉不出来的 var iSpeed = 0; for (var i=0;i<oBox.length;i++){  oBox[i].onmouseover = function(){  clearTimeout(timer2);  startMove(this.offsetLeft);  };  oBox[i].onmouseout = function(){  timer2 = setTimeout(function(){   startMove(0);  },100);  }; } oMark.onmouseover = function(){  clearTimeout(timer2); }; oMark.onmouseout= function(){  timer2 = setTimeout(function(){  startMove(0);  },100); }; function startMove(iTarget){  clearInterval(timer);  timer = setInterval(function(){  iSpeed += (iTarget -oMark.offsetLeft)/5;  iSpeed *= 0.75;  if(Math.abs(iSpeed)<=1 && Math.abs(iTarget -oMark.offsetLeft)<=1){   clearInterval(timer);   oMark.style.left = iTarget + 'px';   childUl.style.left = -iTarget + 'px';   iSpeed = 0;  }else {   oMark.style.left = oMark.offsetLeft + iSpeed +'px';   childUl.style.left = -oMark.offsetLeft +'px';  }  },30); }; };</script></html>

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

上一篇：JS拉起或下载app的实现代码

下一篇：bootstrap fileinput 插件使用项目总结(经验)