Implémentation de l'animation coulissante du menu de navigation Baidu News basée sur jquery

Maison

interface Web

js tutoriel

Implémentation de l'animation coulissante du menu de navigation Baidu News basée sur jquery_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:10 PM

L'exemple dans cet article est de partager avec vous jquery pour implémenter l'animation coulissante du menu de navigation des actualités Baidu pour votre référence. Le contenu spécifique est le suivant

Idées et étapes
1. Utilisez UL pour créer une navigation horizontale simple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>仿百度新闻菜单滑动动画</title>
  <style type="text/css">
    body, div, ul, li, a
    {
      margin: 0px;
      padding: 0px;
      font-size: 20px;
      color: #FFF;
      border: 0;
    }
    .div-nav-container
    {
      margin-top: 50px;
      width: 100%;
      background-color: #01204F;
    }
    .div-nav
    {
      width: 870px;
      margin: 0px auto;
    }
    ul
    {
      list-style: outside none none;
      width: 100%;
      height: 50px;
    }
    ul li
    {
      float: left;
    }
    ul li a
    {
      line-height: 50px;
      display: block;
      padding: 0px 15px;
      text-align: center;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="div-nav-container">
    <div class="div-nav">
      <ul>
        <li><a href="javascript:void(0)">网站首页</a></li>
        <li><a href="javascript:void(0)">热点</a> </li>
        <li><a href="javascript:void(0)">国际新闻</a> </li>
        <li><a href="javascript:void(0)">国内新闻</a> </li>
        <li><a href="javascript:void(0)">国家政策</a> </li>
        <li><a href="javascript:void(0)">体育新闻</a> </li>
        <li><a href="javascript:void(0)">娱乐新闻</a> </li>
        <li><a href="javascript:void(0)">名人</a> </li>
        <li><a href="javascript:void(0)">古迹</a> </li>
      </ul>
    </div>
  </div>
</body>
</html>

Copier après la connexion

2. Ajoutez un div hors du calque, nommé div-hover, pour l'animation de glissement de menu et définissez le style CSS ;

<style type="text/css">
  .div-hover
  {
   background-color: Red;height: 50px;
   left: 0px;
   top: 0px;
   width: 0px;
  }
</style>
<div class="div-nav">
   <!--添加滑动背景-->
   <div class="div-hover">
   </div>
   <ul>
     ...
   </ul>
</div>

Copier après la connexion

3. Ajoutez l'événement coulissant de l'élément de menu et calculez les éléments coulissants, les marges gauche et supérieure et la largeur du div-hover

<script type="text/javascript">
  var divHoverLeft = 0;
  var aWidth = 0;

  $(document).ready(function () {
    $("a").on({
      'mouseover': function () {
        SetDivHoverWidthAndLeft(this);
        //设置滑动动画
        $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
      }
    });
  });

  function SetDivHoverWidthAndLeft(element) {
    divHoverLeft = GetLeft(element);
    aWidth = GetWidth(element);
  }

  //获得Li宽度
  function GetWidth(ele) {
   return $(ele).parent().width();
  }

  //获得div-hover左边距
  function GetLeft(element) {
   //获得li之前的同级li元素
   var menuList = $(element).parent().prevAll();
   var left = 0;
   //计算背景遮罩左边距
   $.each(menuList, function (index, ele) {
    left += $(ele).width();
   });
   return left;
 }
</script>

Copier après la connexion

Aperçu de l'effet

Comme le montre l'effet d'aperçu, il y a un problème avec le positionnement du div-hover. Le div-hover doit être positionné de manière absolue avec l'élément parent, donc le code modifié (la partie commentaire est le point de modification). est le suivant :

<style type="text/css">
  .div-nav
  {
    width: 870px;
    margin: 0px auto;
    /*作为div-hover的父元素定位参照*/
    position: relative;
  }
  .div-hover
  {
    background-color: Red;
    height: 50px;
    left: 0px;
    top: 0px;
    width: 0px;
    /*以父元素绝对定位*/
    position: absolute;
  }
</style>

Copier après la connexion

Bien que le problème de positionnement ait été résolu, l'image d'arrière-plan flotte toujours au-dessus du texte, le code est donc ajusté pour faire flotter le texte au-dessus du div rouge :

<style type="text/css">
  ul li
  {
    float: left; 
    /*****Start（作用:导航文字浮于div-hover红色之上）*******/
    position: relative;
    z-index: 4; 
    /*********************End*************************/
  }
</style>

Copier après la connexion

Aperçu de l'effet

4. Ajouter un clic de menu et une sélection de menu par défaut sur la page de chargement

<style type="text/css">
  /**设置菜单激活***/
  .active
  {
    background-color: Red;
  }
</style>
<script type="text/javascript">
  var divHoverLeft = 0;
  var aWidth = 0;

  $(document).ready(function () {
    $("a").on({
      'mouseover': function () {
        SetDivHoverWidthAndLeft(this);
        //设置滑动动画
        $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
      },
      /*添加点击事件*/
      'click': function () {
        SetDivHoverWidthAndLeft(this);
        //清除所有a标签class
        $('a').removeClass();
        //设置当前点击菜单为激活状态
        $(this).addClass('active');
      }
    });
  });
</script>
</head>
<body>
  <div class="div-nav-container">
    <div class="div-nav">
      <!--添加滑动背景-->
      <div class="div-hover">
      </div>
      <ul>
        <--默认菜单激活--> 
        <li><a class="active" href="javascript:void(0)">网站首页</a></li>
        …………
      </ul>
    </div>
  </div>
</body>
</html>

Copier après la connexion

Aperçu de l'effet

5. Ajoutez la fonction de déplacer la souris hors de portée et de localiser automatiquement l'élément actuellement activé

Avant de faire cette fonction, réfléchissons-y d'abord. Pour les opérations de sortie de souris, nous pouvons penser aux événements mouseout et mouseleave, puis il y aura les questions suivantes :

①Quel événement faut-il sélectionner en ce lieu pour remplir cette condition ?

②Sur quel élément se situe l'événement sélectionné ?

③Comment savoir quel élément est actuellement activé après avoir déplacé la souris ?

④Comment connaître les valeurs équivalentes de marge gauche et de largeur du div-hover ?

La pratique apporte la vraie connaissance, alors pratiquez-la :

Tout d'abord, en prenant mouseout comme exemple, le premier problème est naturellement résolu

;

Deuxièmement, sur quel élément se situe l'événement ? Grâce à l'analyse du diagramme GIF ci-dessus, si le positionnement est dans la balise A ou la balise Li, alors l'opération de déplacement de la souris pour basculer entre la balise A ou la balise Li déclenchera également le positionnement automatique sur l'élément actif (en supposant que le positionnement automatique soit automatique). le positionnement a été effectué), et la figure suivante apparaîtra :

Il ne peut donc pas être positionné sur la balise A ou Li. Si vous y repensez, la souris doit être déplacée hors de toute la plage de navigation. Il est alors facile de déterminer quel élément elle doit être positionnée. sur UL ou sur l'élément parent de UL. Les plages de tailles des deux sont les mêmes, donc les deux éléments sont OK. Si les tailles des deux éléments sont incohérentes, ils doivent être positionnés sur UL. Il existe donc un code similaire à celui-ci :

$("ul").on({
   'mouseout': function (event) {
      /*动画定位div-hover位置到激活元素*/
    }
});

Copier après la connexion

Ensuite, comment savoir quel élément est actuellement activé ? Vous pouvez utiliser des champs cachés ou d'autres méthodes d'affichage pour stocker la largeur et la marge gauche de l'élément actuellement cliqué lorsque l'événement est cliqué. Une fois la souris retirée, le stocké. les données peuvent être relues puis procéder au positionnement animé ; résolvant ainsi les ③④ problèmes ci-dessus ; une partie du code est la suivante :

(Bien sûr, si vous souhaitez connaître l'élément d'activation du menu, vous pouvez également utiliser la méthode avec la classe active pour le trouver. Cependant, cette méthode est relativement plus gênante. Obtenez d'abord l'élément actif, puis recalculez la largeur et additionnez en parcourant li Pour la marge gauche, attribuez enfin une valeur et ajoutez un positionnement coulissant ; ici nous utilisons temporairement la méthode du champ caché car elle est pratique et simple. Si vous êtes intéressé, vous pouvez utiliser la méthode active pour expérimenter) <🎜. >

效果展示:

看图发现依旧出现之前类似定位在A或Li的问题,出现这种情况的原因:

jquery中mouseout如果定位在一个元素上,例如div,那么此div之下的元素都会具有mouseout事件,也就是常说的,事件冒泡机制;与此类似的事件如mousedown,mouseover等，那么是不是阻止事件冒泡就行了呢? 理论上是这样的。通常阻止冒泡有两种方式: event.stopPropagation();和return false;当然他们之间也是有区别的。

相关代码修改如下：

<script type="text/javascript">

    ..........

    $(document).ready(function () {
 
      /*鼠标滑出UL或者div-nav背景div-hover自动定位到激活菜单处*/
      $("ul").on({
        'mouseout': function (event) {
          $(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
          /**阻止冒泡**/
          event.stopPropagation();
          //return false;
        }
      });
    });

    .......
</script>

Copier après la connexion

无论何种阻止方式,都没有卵用,依旧阻止不了冒泡,效果可想而知,与上面Gif图所示无异;

由此证明，mouseover在实现此功能方面是有问题的;

那换mouseleave呢，除了将mouseover修改为mouseleave和去除冒泡代码外,其他代码不做改动，实验效果如下:

从上图可以看出,效果与百度新闻导航滑动基本无异,至此大功告成;

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>仿百度新闻菜单滑动动画</title>
  <style type="text/css">
    body, div, ul, li, a
    {
      margin: 0px;
      padding: 0px;
      font-size: 20px;
      color: #FFF;
      border: 0;
    }
    .div-nav-container
    {
      margin-top: 50px;
      width: 100%;
      background-color: #01204F;
    }
    .div-nav
    {
      /*作为div-hover的父元素定位参照*/
      position: relative;
      width: 870px;
      margin: 0px auto;
    }
    .div-hover
    {
      background-color: Red;
      /*以父元素绝对定位*/
      position: absolute;
      height: 50px;
      left: 0px;
      top: 0px;
      width: 0px;
    }
    ul
    {
      list-style: outside none none;
      width: 100%;
      height: 50px;
    }
    ul li
    {
      float: left;
      /*****Start（作用:导航文字浮于div-hover红色之上）*******/
      position: relative;
      z-index: 4;
      /*********************End*************************/
    }
    ul li a
    {
      line-height: 50px;
      display: block;
      padding: 0px 15px;
      text-align: center;
      text-decoration: none;
    }
    /**设置菜单激活***/
    .active
    {
      background-color: Red;
    }
  </style>
  <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
  <script type="text/javascript">

    var divHoverLeft = 0;
    var aWidth = 0;

    $(document).ready(function () {
      //菜单滑动动画
      $("a").on({
         /*此处用mouseover或者mouseenter均可，如果以后要为X标签同时添加悬停和移出事件，建议用enter和leave也就是传说中的hover事件，因为里面事件冒泡已经处理过，就不会出现类似over和out之类的情况了*/
        'mouseenter': function () {
          SetDivHoverWidthAndLeft(this);
          //设置滑动动画
           $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
        },
        'click': function () {
          SetDivHoverWidthAndLeft(this);
          //清除所有a标签class
          $('a').removeClass();
          //设置当前点击菜单为激活状态
          $(this).addClass('active');

          $(".h-width").val(aWidth);
          $(".h-left").val(divHoverLeft);
        }
      });

      /*鼠标滑出UL或者div-nav背景div-hover自动定位到激活菜单处*/
      //mouseleave事件定位到ul或者div-nav均可
      $("ul").on({
        'mouseleave': function (event) {
          $(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
        }
      });
    });

    function SetDivHoverWidthAndLeft(element) {
      divHoverLeft = GetLeft(element);
      aWidth = GetWidth(element);
    }

    //获得Li宽度
    function GetWidth(ele) {
      return $(ele).parent().width();
    }

    //获得div-hover左边距
    function GetLeft(element) {
      //获得li之前的同级li元素
      var menuList = $(element).parent().prevAll();
      var left = 0;
      //计算背景遮罩左边距
      $.each(menuList, function (index, ele) {
        left += $(ele).width();
     });
     return left;
    }
  </script>
</head>
<body>
  <div class="div-nav-container">
    <div class="div-nav">
      <!--添加滑动背景-->
      <div class="div-hover">
      </div>
      <ul>
        <li><a class="active" href="javascript:void(0)">网站首页</a></li>
        <li><a href="javascript:void(0)">热点</a> </li>
        <li><a href="javascript:void(0)">国际新闻</a> </li>
        <li><a href="javascript:void(0)">国内新闻</a> </li>
        <li><a href="javascript:void(0)">国家政策</a> </li>
        <li><a href="javascript:void(0)">体育新闻</a> </li>
        <li><a href="javascript:void(0)">娱乐新闻</a> </li>
        <li><a href="javascript:void(0)">名人</a> </li>
        <li><a href="javascript:void(0)">古迹</a> </li>
      </ul>
    </div>
  </div>
  <input type="hidden" class="h-width" value="110" />
  <input type="hidden" class="h-left" value="0" />
</body>
</html>

Copier après la connexion

总结和关键点
1.背景滑动由某个块状元素(此处用的div)来实现,而非本元素的hover改变背景颜色;

2.注意元素定位(滑动块状元素以谁来绝对定位或者相对定位，左边距的计算和自身宽度的计算；滑动块状元素div-hover和li之间的相对定位，以及层级大小)；

3.滑动动画事件animate和记录激活菜单，鼠标移出区域自定定位到激活菜单；

4.jquery中mouseover，mouseout以及mouseenter，mouseleave关于冒泡机制的区别；（前两个未做冒泡机制的限制，后两个冒泡已经经过处理，事件只针对注册元素本身，而不会对子元素起作用，mouseenter和mouseleave用在一个元素标签上可以用hover事件代替，本身hover就是这两者的封装，如果事件在不同元素标签上，最好分开调用mouseenter和mouseleave事件）

5.所有关键点以及作用都已经在代码各处加上注释，各位可以看看。

希望本文对大家学习jquery程序设计有所帮助。

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

Assassin's Creed Shadows - Comment trouver le forgeron et déverrouiller les armes et la personnalisation des armes

1 Il y a quelques mois By DDD

<🎜>: Dead Rails - Comment relever chaque défi

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7621

Tutoriel CakePHP

1389

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

136

Afficher plus

Related knowledge

Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Apr 04, 2025 pm 02:42 PM

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

Qui est payé plus de python ou de javascript? Apr 04, 2025 am 12:09 AM

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

Démystifier javascript: ce qu'il fait et pourquoi c'est important Apr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Apr 04, 2025 pm 05:09 PM

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido? ou: Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Apr 04, 2025 pm 05:36 PM

La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...

La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? Apr 04, 2025 pm 05:12 PM

Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...

JavaScript est-il difficile à apprendre? Apr 03, 2025 am 12:20 AM

Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.

PowerPoint peut-il exécuter JavaScript? Apr 01, 2025 pm 05:17 PM

JavaScript peut être exécuté dans PowerPoint et peut être implémenté en appelant des fichiers JavaScript externes ou en intégrant des fichiers HTML via VBA. 1. Pour utiliser VBA pour appeler les fichiers JavaScript, vous devez activer les macros et avoir des connaissances en programmation VBA. 2. ENCHED des fichiers HTML contenant JavaScript, qui sont simples et faciles à utiliser mais sont soumis à des restrictions de sécurité. Les avantages incluent les fonctions étendues et la flexibilité, tandis que les inconvénients impliquent la sécurité, la compatibilité et la complexité. En pratique, l'attention doit être accordée à la sécurité, à la compatibilité, aux performances et à l'expérience utilisateur.

See all articles