HTML5 애플리케이션에서 아코디언의 세 가지 효과 탐색에 대한 자세한 설명

추상: 아코디언("서랍"이라고도 함) 효과는 아코디언처럼 보이는 확장 스타일의 이름을 따서 명명되었습니다. 계층적 관계를 통해 정보 표시와 페이지 레이아웃에서 영리한 균형이 이루어집니다. 따라서 웹 및 앱 상호작용 디자인에 널리 사용됩니다. 이전 프로젝트에서는 Accordion을 주로 JavaScript 코딩으로 구현했습니다. 이번 공유에서는 JS에 의존하지 않고 순수 CSS3 또는 HTML5를 사용하여 효과를 얻는 두 가지 방법을 탐색하는 데 중점을 둡니다. 그리고 장점과 단점을 미리 비교해 보세요.

기존 JS 구현 방법

1. 기본 JavaScript

2. JS 라이브러리 파일 호출, jQuery, jQuery Mobile

$'.menu_lev1').clickfunction) {

    var _this=$this),

        _next=_this.next);

    if _next.is':visible')) {

        $'.menu_lev1').removeClass'on');

        $'.menu_lev2').slideUp600);

        _this.addClass'on');

        _next.slideDown600);

    } else {

        _next.slideUp600);

        _this.removeClass'on');

    }

    return true;

});

코드 복사의 단점: 낮은 효율성, 높은 비용, 동작 및 스타일이 밀접하게 결합되어 있습니다.

CSS3 의사 클래스: target

target은 CSS3의 새로운 의사 클래스 중 하나입니다. 앵커 포인트 를 통해 대상 요소에 지정된 스타일을 추가할 수 있습니다. 페이지에 있는 기준점의 고유성으로 인해 상호 배타적인 회전 효과를 얻을 수 있습니다.

샘플 코드 1: h1 1차 디렉터리/h1>

ul id="ac1">

      li>二级菜单1/li>

      li>二级菜单2/li>

      li>二级菜单3/li>

 /ul>

코드 복사

ul{ display:none;}

ul:target{display:block;}

코드 복사샘플 코드 2: c1">1차 디렉터리/a> / h1> Css3 의사 클래스: targetl 단점: 1. 이중성이 없습니다. 2. 전환

애니메이션

높이를 자동으로 얻을 수 없습니다.

HTML5 태그 요약 및 세부 정보

& 세부 사항은 HTML5의 두 가지 새로운 태그입니다. 강력한

의미

외에도 놀라운 동적 효과가 있으므로 이 기능을 활용하면 쉽게 만들 수 있습니다. 두 개의 태그는 쌍으로 사용해야 합니다. 샘플 코드 1: 세부정보>

ul id="ac1">

      li>二级菜单1/li> 

      li>二级菜单2/li> 

      li>二级菜单3/li>

/ul>

h1>2">一级目录/a>/h1>

ul id="ac2">

      li>二级菜单1/li> 

      li>二级菜单2/li> 

      li>二级菜单3/li>

/ul>

h1>一级目录/a>/h1>

ul id="ac3">

      li>二级菜单1/li> 

      li>二级菜单2/li> 

      li>二级菜单3/li>

/ul>

코드 복사 기본 스타일: 속성

을 사용하면 기본적으로 세부정보를 확장할 수 있습니다. 현재는 웹킷 커널에서만 지원됩니다.

샘플 코드 2: 세부정보>

ul{ display:none;}

ul:target{display:block;}

코드 설명 복사:

h1>a >一级目录/a>span>/span>/h1>

ul>

      li>二级菜单1/li>

      li>二级菜单2/li>

/ul>

/div>

div id="ac2" >

          h1>a >一级目录/a>span>/span>/h1>

          ul>

               li>二级菜单1/li>

               li>二级菜单2/li>

          /ul>

/div>

div id="ac3" >

          h1>a 3">一级目录/a>span>/span>/h1>

          ul>

               li>二级菜单1/li>

               li>二级菜单2/li>

          /ul>

/div>

코드 복사의 단점: 1. 상호 배타적이지 않습니다. 2. 현재 전환 애니메이션 효과가 지원되지 않습니다.

현재 아코디언 효과의 JS 구현 요약은 다음과 같습니다. , CSS3는 가장 풍부한 효과를 얻을 수 있습니다. 풍부한 애니메이션 효과를 얻을 수 있지만 HTML5는 아코디언 효과를 얻을 수 있는 이중성이 없으며 비용이 낮지만 애니메이션 효과가 부족합니다. 현재 지원되는 브라우저 코어는 제한되어 있습니다.

CSS3 및 HTML5의 도입 및 개발을 기대하면 웹 디자인의 개념이 어느 정도 향상될 것입니다. 이는 성능면에서 JS에 대한 의존도를 줄이고, 웹페이지 제작 비용을 절감하며, 웹페이지 운영의 효율성을 향상시킵니다. CSS3와 HTML5가 계속해서 개선되어 더욱 강력한 기능을 제공하리라고 기대하지 않을 이유가 없습니다. 앞으로 콘텐츠가 많은 웹 앱에서는

성능 우선 원칙에 따라 적절하게 디그레이드하고 HTML5 태그를 사용하여 아코디언 효과를 얻는 것이 좋습니다. 적어도 Html5doctor의 작성자는 WordPress에서 이를 선호합니다.

위 내용은 HTML5 애플리케이션에서 아코디언의 세 가지 효과 탐색에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!