ビデオに従って、夜にフレキシブルメニューのコードを入力しました
効果は次のとおりです:
コードは次のとおりです:
<!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 実装 ナビゲーション バー関連の記事については、PHP 中国語 Web サイトに注目してください。