Maison >interface Web >js tutoriel >JavaScript implémente des effets de barre de navigation personnalisés

JavaScript implémente des effets de barre de navigation personnalisés

php中世界最好的语言original: 2017-12-31 11:36:322502parcourir

Ce que nous vous proposons cette fois, c'est JavaScript pour implémenter des effets spéciaux de barre de navigation personnalisés. Nous savons que le JS tout-puissant peut réaliser de nombreux effets spéciaux. Cet article vous donnera une analyse détaillée.

Principe de mise en œuvre :

Qu'est-ce que l'effet nuage de saut périlleux :

•Cet effet est très simple, c'est-à-dire que lorsque la souris se déplace vers d'autres répertoires de navigation, l'arrière-plan l'image suivra la souris et glissera vers le répertoire actuel.

Idées d'implémentation :

•Lorsque la souris passe, utilisez offsetLeft pour obtenir la distance entre la boîte actuelle et le côté gauche, et attribuez cette valeur à la valeur finale de l'animation d'assouplissement.
• Mémorisez la valeur offsetLeft actuelle lorsque vous cliquez dessus, et lorsque la souris passe dessus, attribuez la valeur offsetLeft précédemment cliquée à la valeur actuelle lors de son passage.

Code d'implémentation :

Ce qui suit est le code d'implémentation et les commentaires détaillés. Le noyau est de définir une balise span avec une position absolue, en liant les événements de souris, l'animation animée encapsulée est utilisée pour réaliser. le "saut périlleux" de la travée, effet "Cloud".

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

Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser vue pour implémenter la vérification de connexion

Utiliser jQuery pour dédupliquer et trier les tableaux Opération

Comment déterminer si la sélection CheckBox est vide

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple d'Ajax pour remplir automatiquement les champs de formulaireArticle suivant：Exemple d'Ajax pour remplir automatiquement les champs de formulaire

Articles Liés

Voir plus