Maison > Article > interface Web > Acquérez facilement les compétences jquery accordéon effect_javascript

Acquérez facilement les compétences jquery accordéon effect_javascript

WBOYoriginal: 2016-05-16 15:19:45997parcourir

L'effet spécial d'animation JQuery que je vais vous expliquer est l'accordéon. Sans plus attendre, regardons d'abord le rendu final.

1. Analyse des principes de mise en œuvre

Stéréogramme correspondant :

2. Analyse du code HTML

<body> 
  <div id="container"> 
    <ul id="content"> 
      <li class="first"> 
        <h3>真</h3> 
        <div><img src="images/0.jpg"/></div> 
      </li> 
      <li class="second"> 
        <h3>的</h3> 
        <div><img src="images/1.jpg"/></div> 
      </li> 
      <li class="third"> 
        <h3>爱</h3> 
        <div><img src="images/2.jpg"/></div> 
      </li> 
      <li class="forth"> 
        <h3>你</h3> 
        <div><img src="images/4.jpg"/></div> 
      </li> 
    </ul> 
  </div> 
</body>

1. Le div avec l'identifiant du conteneur est la zone rouge dans l'analyse ci-dessus.
2. L'ul avec l'identifiant du contenu est utilisé pour stocker tous les li.

3. Chaque li est une combinaison d'une zone rouge et de l'image correspondante.

3. Analyse du code CSS

*{margin: 0; padding: 0;} 
 
    img{ 
      border:0; 
    } 
 
    #container 
    { 
      width:680px; 
      height: 300px; 
      margin: 100px auto; 
      position: relative; 
      border:3px solid red; 
      overflow: hidden; 
    } 
 
    #container #content 
    { 
      list-style: none; 
    } 
 
    #container #content li{ 
      width:590px; 
      height:300px; 
      position: absolute; 
    } 
 
    #container #content li.second{ 
      left:590px; 
    } 
 
    #container #content li.third{ 
      left:620px; 
    } 
 
    #container #content li.forth{ 
      left:650px; 
    } 
 
    #container #content li h3{ 
      float:left; 
      width: 24px; 
      height:294px; 
      border:3px solid blue; 
      background-color: yellow; 
      cursor: pointer; 
    } 
 
    #container #content li div{ 
      float: left; 
      width: 560px; 
      height:300px; 
    }

1. Les balises * et img sont utilisées pour supprimer les lacunes par défaut du système et d'autres effets.
2. #container est la zone visible analysée ci-dessus, donc sa taille est de 680 * 300, et c'est le conteneur de tous les éléments enfants, donc elle est positionnée relativement (position : relative).

3. #container #content consiste à supprimer l'effet de petit point par défaut de ul.

4. Tous les li sont positionnés de manière absolue et leur taille est de 590 * 300, puis définissez la valeur gauche du li suivant et définissez l'attribut h3 (zone jaune) du li sur flottant.

Une fois tous les styles CSS ci-dessus définis, l'effet final sera l'effet dans l'image d'analyse.

4. Analyse du code JQuery

Le code interactif js de l'accordéon est en fait très simple. Il suffit de changer la valeur gauche correspondant à la position absolue de li en temps réel. Le code est le suivant :

$(function(){ 
 
      $("#container #content li.first h3").mouseenter(function(){ 
        $("#container #content li.second").stop().animate({"left":590}, 1000); 
        $("#container #content li.third").stop().animate({"left":620}, 1000); 
        $("#container #content li.forth").stop().animate({"left":650}, 1000); 
      }); 
 
      $("#container #content li.second h3").mouseenter(function(){ 
        $("#container #content li.second").stop().animate({"left":30}, 1000); 
        $("#container #content li.third").stop().animate({"left":620}, 1000); 
        $("#container #content li.forth").stop().animate({"left":650}, 1000); 
      }); 
 
      $("#container #content li.third h3").mouseenter(function(){ 
        $("#container #content li.second").stop().animate({"left":30}, 1000); 
        $("#container #content li.third").stop().animate({"left":60}, 1000); 
        $("#container #content li.forth").stop().animate({"left":650}, 1000); 
      }); 
 
      $("#container #content li.forth h3").mouseenter(function(){ 
        $("#container #content li.second").stop().animate({"left":30}, 1000); 
        $("#container #content li.third").stop().animate({"left":60}, 1000); 
        $("#container #content li.forth").stop().animate({"left":90}, 1000); 
      }); 
       
    });

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

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：Le plug-in jQuery imgPreviewQs implémente l'image téléchargée preview_jqueryArticle suivant：Le plug-in jQuery imgPreviewQs implémente l'image téléchargée preview_jquery

Articles Liés

Voir plus