Jquery 아코디언 effect_javascript 기술을 쉽게 얻을 수 있습니다.-JS 튜토리얼-php.cn

Jquery 아코디언 effect_javascript 기술을 쉽게 얻을 수 있습니다.

WBOY

풀어 주다： 2016-05-16 15:19:45

원래의

1058명이 탐색했습니다.

제가 설명드릴 JQuery 애니메이션 특수효과는 바로 아코디언입니다. 먼저 최종 렌더링을 살펴보겠습니다.

1. 구현 원칙 분석

해당 스테레오그램:

2. 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. 위 분석에서 빨간색으로 표시된 부분이 컨테이너 ID의 div입니다.
2. 콘텐츠 ID를 가진 ul은 모든 li를 저장하는 데 사용됩니다.

3. 각 리는 빨간색 영역과 해당 그림의 조합입니다.

3. 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. * 및 img 태그는 시스템 기본 공백 및 기타 효과를 제거하는 데 사용됩니다.
2. #container는 위에서 분석한 가시 영역이므로 크기는 680*300이고, 모든 자식 요소의 컨테이너이므로 상대적으로 위치(위치:상대)됩니다.

3. #container #content는 ul의 기본 작은 점 효과를 제거하는 것입니다.

4. 모든 li는 절대 위치에 있고 크기는 590 * 300이며 다음 li의 왼쪽 값을 설정하고 li의 h3(노란색 영역) 속성을 float로 설정합니다.

위 CSS 스타일을 모두 설정한 후 최종 효과는 분석 사진의 효과가 됩니다.

4. JQuery 코드 분석

아코디언의 js 인터랙티브 코드는 실제로 매우 간단합니다. li의 절대 위치에 해당하는 왼쪽 값을 실시간으로 변경하면 됩니다.

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

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.