Heim > Artikel > Web-Frontend > js implementiert die Navigationsleiste mit einfacher elastischer Bewegung

js implementiert die Navigationsleiste mit einfacher elastischer Bewegung

高洛峰Original: 2017-02-23 17:27:081284Durchsuche

Ich habe das Video verfolgt und nachts den Code für das flexible Menü eingegeben. Ich habe ihn zuerst aufgeschrieben.

Der Effekt ist wie folgt:

Der Code lautet wie folgt:

<!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(&#39;.mark&#39;);
 var oBox = document.querySelectorAll(&#39;.box&#39;);
 var childUl = oMark.querySelector(&#39;ul&#39;);
 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 + &#39;px&#39;;
   childUl.style.left = -iTarget + &#39;px&#39;;
   iSpeed = 0;
  }else {
   oMark.style.left = oMark.offsetLeft + iSpeed +&#39;px&#39;;
   childUl.style.left = -oMark.offsetLeft +&#39;px&#39;;
  }
  },30);
 };
 };
</script>
</html>

Weitere Artikel zum Thema JS Informationen zur Implementierung der Navigationsleiste mit einfacher elastischer Bewegung finden Sie im PHP Chinese Net!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS ruft den App-Implementierungscode auf oder lädt ihn herunterNächster Artikel：JS ruft den App-Implementierungscode auf oder lädt ihn herunter

In Verbindung stehende Artikel

Mehr sehen