Comment implémenter la navigation Panda TV en utilisant jquery+css3

Cet article partagera avec vous en détail jquery+css3 pour écrire l'effet de la navigation Panda TV, ainsi que le partage de code. Les amis qui l'aiment peuvent s'y référer.

Principe de mise en œuvre

Veuillez consulter le code source suivant

<p class="ph-nav" data-pdt-block="pheader-n">
      <p class="ph-nav_shadow" style="left: 0px; width: 62px;"></p>
      <ul>
        <li class="ph-nav_item ph-nav_item--current">
          <a href="/" rel="external nofollow" >
          首页
          
          </a>
        </li>
        <li class="ph-nav_item">
          <a href="/all" rel="external nofollow" >
          全部
          </a>
        </li>
        ...
      </ul>
</p>

Le code correspondant au vert box est p avec la classe ph-nav_shadow.

Utilisez jquery pour modifier les valeurs de gauche et de largeur du calque de masque (.ph-nav_shadow), et ajoutez des effets d'animation CSS3 pour réaliser l'animation de la boîte verte.

Appelez jquery pour ajouter et supprimer la classe de balise li afin de changer la couleur du texte. (.ph-nav_item--current).

Implémentation spécifique

Écrire du code html

 <header>
    <p class="w">
      <p class="header_logo l"><img src="img/logo.png" alt=""></p>
      <p class="header_nav r">
         <p class="header_nav_shadow"></p>
         <ul>
           <li class="header_nav_li-hover"><a href="">首页</a></li>
           <li><a href="">智能家居</a></li>
           <li><a href="">案例展示</a></li>
           <li><a href="">致创能源</a></li>
           <li><a href="">答疑解惑</a></li>
           <li><a href="">合作加盟</a></li>    
        </ul>
      </p>
    </p> 
  </header>

Écrire du code css

.header_nav{
  width: 592px;
  height: 50px;
  position: relative;
}
.header_nav_shadow{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 72px;
  background: #F29400;
  transition: all ease-in-out .3s;
  z-index: 1;
}
.header_nav ul li{
  display: block;
  float: left;
  overflow: hidden;
  height: 50px;
  line-height: 50px;
  transition: all ease-in-out .3s;
  position: relative;
  z-index: 2;
}
.header_nav_li-hover a{
  color: #fff;
}
.header_nav ul li a{
  display: block;
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
  transition: all ease-in-out .3s;
}

Écrire du code js (principalement)

$(document).ready(function() { 
  $(".header_nav ul li").hover(function() { 

    var change = getLiData($(this));
    $(".header_nav_shadow").css('left',change[0]).width(change[1]);
    $(".header_nav ul").children("li:first-child").removeClass("header_nav_li-hover"); 
    $(this).addClass("header_nav_li-hover"); 
  }, function() { 
    $(".header_nav_shadow").css('left',0).width('72');
    $(this).removeClass("header_nav_li-hover"); 
    $(".header_nav ul").children("li:first-child").addClass("header_nav_li-hover");
  }); 
});
// 根据this li 获取需要改变的长度和偏移量
function getLiData(li){
  var left = 0;
  for(let i=0;i<li.index();i++){
    left+=$(".header_nav ul li:eq("+i+")").width();
  }
  var change=[left,li.width()];
  return change;
}

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Interprétation détaillée du motif de conception décorative en js

Comment contrôler le glisser-déposer de fichiers et obtenir le glisser-déposer js Fonction de contenu

Utiliser Vue pour implémenter les principes sous-jacents (tutoriel détaillé)

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!