suchen

Heim >Web-Frontend >js-Tutorial >JavaScript implementiert personalisierte Navigationsleisteneffekte

JavaScript implementiert personalisierte Navigationsleisteneffekte

php中世界最好的语言
php中世界最好的语言Original
2017-12-31 11:36:322539Durchsuche

Was wir Ihnen dieses Mal vorstellen, ist JavaScript zur Implementierung personalisierter Navigationsleisten-Spezialeffekte. Wir wissen, dass der allmächtige JS viele Spezialeffekte erzielen kann.

Implementierungsprinzip:

Was ist der Saltowolkeneffekt:

•Dieser Effekt ist sehr einfach, das heißt, wenn die Maus in andere Navigationsverzeichnisse bewegt wird, wird der Hintergrund angezeigt Das Bild folgt der Maus und gleitet in das aktuelle Verzeichnis.

Implementierungsideen:

•Wenn die Maus vorbeifährt, verwenden Sie offsetLeft, um den Abstand zwischen dem aktuellen Feld und der linken Seite zu ermitteln, und weisen Sie diesen Wert dem Endwert der Beschleunigungsanimation zu.
• Merken Sie sich den aktuellen OffsetLeft-Wert, wenn Sie darauf klicken, und wenn Sie mit der Maus darüber fahren, ersetzen Sie den zuvor angeklickten OffsetLeft-Wert durch den aktuellen Wert, wenn Sie daran vorbeifahren.

Implementierungscode:

Im Folgenden finden Sie den Implementierungscode und detaillierte Kommentare. Der Kern besteht darin, ein Span-Tag mit absoluter Position festzulegen und die gekapselte Animationsanimation zu realisieren der „Salto“ des Span-„Wolken“-Effekts. 

<!DOCTYPE html>
<html>
<head>
  <title>导航栏筋斗云效果</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    body{
      background-color: rgba(0, 0, 0, 0.6);
    }
    .box{
      width: 415px;
      height: 42px;
      margin: 200px auto;
      background-color: #fff;
      position: relative;
    }
    ul{
      list-style: none;
      position: relative;
    }
    li{
      float: left;
      width: 83px;
      height: 42px;
      text-align: center;
      font: 500 15px/42px "微软雅黑";
      cursor: pointer;
    }
    span{
      position: absolute;
      left: 0;
      top: 0;
      width: 83px;
      height: 42px;
      background-image: linear-gradient(to right,#03c03c 50% ,#51ee5d 100%);
    }
  </style>
</head>
<body>
<p class="box">
  <span></span>
  <ul>
    <li>菜单栏1</li>
    <li>菜单栏2</li>
    <li>菜单栏3</li>
    <li>菜单栏4</li>
    <li>菜单栏5</li>
  </ul>
</p>
<script type="text/javascript">
  window.onload = function(){
    // 鼠标放在哪个li上面，span对应一道到哪里，移开后回到原位置
    var liArr = document.getElementsByTagName("li");
    var liWidth = liArr[0].offsetWidth;
    var span = document.getElementsByTagName("span")[0];
    // 计数器
    var cnt = 0;
    // for循环绑定事件
    for(var i=0; i<liArr.length; i++){
      // 自定义属性，然后绑定index属性为索引值
      liArr[i].index = i;
      // 鼠标进入事件
      liArr[i].onmouseover = function(){
        // 然span运动到该li的索引值位置
        animate(span, this.index*liWidth);
      }
      // 鼠标移开
      liArr[i].onmouseout = function(){
        // span运动到原位置
        animate(span, cnt*liWidth);
      }
      // 点击事件
      liArr[i].onclick = function(){
        // 计数器记录当前标签索引值
        cnt = this.index;
        animate(span, cnt*liWidth);
      }
    }
    // 缓动动画封装
    function animate(element, target){
      // 清除间歇调用
      clearInterval(element.timer);
      // 设置超时调用
      element.timer = setInterval(function(){
        // 设置步数
        var step = (target - element.offsetLeft)/10;
        // 调整步数
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // 设置样式
        element.style.left = element.offsetLeft + step + "px";
        // console.log(1);
        if(Math.abs(target - element.offsetLeft) < Math.abs(step)){
          element.style.left = target + "px";
          clearInterval(element.timer);
        }
      }, 20);
    }
  }
</script>
</body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie die obige Einführung gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie Vue, um die Anmeldeüberprüfung zu implementieren

Verwenden Sie jQuery, um Arrays zu deduplizieren und zu sortieren. Betrieb

So ermitteln Sie, ob die CheckBox-Auswahl leer ist

Das obige ist der detaillierte Inhalt vonJavaScript implementiert personalisierte Navigationsleisteneffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Beispiel für Ajax zum automatischen Ausfüllen von FormularfeldernNächster Artikel：Beispiel für Ajax zum automatischen Ausfüllen von Formularfeldern

In Verbindung stehende Artikel

Mehr sehen