纯JS实现弹性导航条效果

时间：2021-05-18

效果图：

代码如下：

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

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

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

相关文章