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

时间：2021-05-26

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

效果如下：

代码如下：

<!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>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章