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

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

WBOY

Libérer： 2016-05-16 15:19:45

original

1034 Les gens l'ont consulté

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>

Copier après la connexion

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; 
    }

Copier après la connexion

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); 
      }); 
       
    });

Copier après la connexion

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.