彈性選單
阿新 • • 發佈：2019-01-09
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #ul1{ width: 428px; height: 30px; position: relative; margin: 20px auto; } #ul1 li{ width: 100px; height: 30px; background: red; list-style: none; float: left; border: 1px solid #000; margin-right: 5px; line-height: 30px; text-align: center; } #ul1 #mark{ position: absolute; left: 0; top: 0; overflow: hidden; } #ul1 #mark ul{ width: 428px; position: absolute; left: -1px; top: -1px; color: #fff; } </style> <script> window.onload=function(){ var oMark=document.getElementById("mark"); var aBox=document.getElementsByClassName("box"); var childUl=oMark.getElementsByTagName("ul")[0]; var timer=null; var timer2=null; var iSpeed=0; for(var i=0;i<aBox.length;i++){ aBox[i].onmouseover=function(){ clearInterval(timer2); startMove(this.offsetLeft); } aBox[i].onmouseout=function(){ timer2=setTimeout(function(){ startMove(0); },100) } } oMark.onmouseover=function(){ clearInterval(timer2); } oMark.onmouseout=function(){ timer2=setTimeout(function(){ startMove(0); },100) } function startMove(iTarget){ clearInterval(timer); timer=setInterval(function(){ iSpeed+=(iTarget-oMark.offsetLeft)/6; 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> </head> <body> <ul id="ul1"> <li id="mark"> <ul> <li class="box">首頁</li> <li class="box">論壇</li> <li class="box">視訊</li> <li class="box">留言</li> </ul> </li> <li class="box">首頁</li> <li class="box">論壇</li> <li class="box">視訊</li> <li class="box">留言</li> </ul> </body> </html>