30 jQuery 응답 레이아웃 플러그인

이 기사는 적응 형, 모바일 친화적 인 웹 사이트를 만드는 웹 디자이너를위한 30 개의 유용한 jQuery 응답 레이아웃 플러그인을 살펴 봅니다. 이 플러그인은 동적 레이아웃, 이미지 크기 조정, 회전 목마 및 컨텐츠 스크롤을 포함한 다양한 기능을 제공하여 다양한 장치 및 화면 해상도에서 최적의 사용자 경험을 보장합니다. 키 포인트 :

이 리소스는 반응 형 웹 사이트를 만들기위한 30 개의 jQuery 플러그인 목록을 제공합니다. 플러그인은 동적 레이아웃, 이미지 스케일링, 회전식 및 원활한 컨텐츠 스크롤과 같은 기능을 제공합니다. 이 기사는 웹 사이트에 액세스하는 데 사용되는 다양한 장치를 고려할 때 현대 웹 디자인에서 이러한 플러그인의 중요성을 강조합니다.

jQuery-Quickfit :

컨테이너 내에 텍스트를 장착하기위한 간단한 솔루션.

소스
Demo
• 작은 화면의 드롭 다운 메뉴 :
메뉴는 좁은 화면의 드롭 다운으로 메뉴를 변환합니다.

소스

1. Demo
   DoubleTake :

   정의 된 중단 점을 사용하여 브라우저 너비에 따라 이미지 소스를 동적으로 조정합니다. 소스 Demo

   responsiveSlides.js :
> 요소 내에서 이미지에서 응답 형 슬라이드 쇼를 만드는 소형 플러그인. 광범위한 브라우저에서 작동합니다.

2. 소스 Demo

   jQuery Responsive Thumbnail Gallery : 두 가지 크기로 이미지를 정의 할 수 있습니다. 플러그인은 화면 크기에 따라 적절한 크기를 선택합니다. 소스

   Demo
3. rlightbox : jQuery UI MediaBox (이미지, YouTube/Vimeo 비디오)를 표시합니다. 파노라마 및 라이브 크기 조정이 특징입니다

   소스 Demo

   동위 원소 : CSS 단독 기능을 넘어 동적 레이아웃을위한 jQuery 플러그인. 요소를 쉽게 숨기고, 드러내고, 재주문합니다 소스 Demo

jQuery가있는 자동 이미지 몽타주 :
4. 창 크기와 이미지 제약 조건에 적응하는 이미지 몽타주를 만듭니다.

   소스 Demo

   WMUSLIDER : 탐색, 페이지 매김, 애니메이션 및 터치 지원이있는 간단하고 반응 형 이미지 슬라이더. 소스 Demo

5. 헤드 업 그리드 :

   응답 오버레이 그리드 반응 형 웹 디자인 단순화. 소스

   Demo

   AdaptiveMedia : 모바일 장치의 빠른로드를 위해 화면 크기를 기반으로 다른 이미지를로드합니다. 소스

Demo

6. hoverizr : 이미지 조작을 적용하는 작은 플러그인 (Grayscale, Blur, Color Version). 소스

   Demo

7. tinynav.js : 목록 기반 탐색을 작은 화면에서 선택 드롭 다운으로 변환합니다. 소스

   Demo html의 적응 형 이미지 : 화면 크기를 감지하고 적절하게 스케일링 된 이미지를 전달합니다.

   소스
8. Demo

   동적 회전 목마 : 반응 형 레이아웃을 위해 설계된 회전식 플러그인

   소스

   Demo Responsive-Menu : 목록 기반 탐색을 모바일의 선택 요소로 변환합니다.

   소스
9. Demo

   사진 스 와이프 : 모바일 친화적 인 이미지 갤러리 생성을위한 jQuery 모바일 플러그인.

   소스

   Demo ScrollDeck.js :

   부드러운 스크롤 애니메이션으로 반응 형 슬라이드 쇼/프레젠테이션을 만듭니다
소스

10. Demo

    터치 카로 셀 :

    모바일 및 데스크탑 용 가볍고 터치 가능 컨텐츠 스크롤러. 소스 Demo

    JQuery & CSS3을 사용한 반응 형 수평 레이아웃 :
선택시 애니메이션이있는 개별 스크롤 가능한 패널을 생성합니다.

소스 Demo relation.js :

키보드 내비게이션 및 자동 시작 기능이있는 응답 형 이미지 슬라이더가 포함되어 있습니다. 소스

11. Demo

    카메라 : 스킨, 완화 및 다양한 전환과 같은 기능이있는 반응 슬라이드 쇼.

    소스 Demo Unoslider :

    완전 반응 형, 터치 가능 및 모바일 최적화 된 jQuery 슬라이더
소스

12. Demo

    FlexSlider : 터치 스 와이프, 콜백 API 및 내비게이션 옵션이있는 사용자 정의 가능한 응답 슬라이더. 소스 Demo

swipejs : 터치 움직임, 경계 저항 및 스크롤 예방이있는 가벼운 모바일 슬라이더.
13. 소스

    Demo

    블루 베리 : 유체/반응 레이아웃을위한 실험적인 오픈 소스 jQuery 이미지 슬라이더. 소스 Demo

14. breakpoints.js : 브라우저가 중단 점에 들어가거나 종료 할 때 이벤트를 정의하고 이벤트를 정의합니다.

    소스 Demo

    jQuery Masonry :

동적 레이아웃 플러그인은 CSS 플로트와 유사한 레이아웃을 생성하지만 유연성이 더 많습니다.
15. 소스

    Demo

    jQuery Responsive Web : 반응 형 디자인을위한 OS, 브라우저 및 해상도를 기반으로 본문에 동적 클래스를 추가합니다. 소스 Demo

16. 응답 js :

    > 브레이크 포인트를 기반으로 코드 블록을 동적으로 바꾸어 응답 웹 사이트를 구축하기위한 도구를 제공하는 가벼운 플러그인. 소스

    Demo

    (각 플러그인에 대한 소스 코드 및 데모 페이지에 대한 실제 링크로 및 를 교체해야합니다.) 자주 묻는 질문 섹션은 간결성에 대해 생략되었지만 비슷한 인사 표식 스타일로 쉽게 다시 채워질 수 있습니다.

    >.

위 내용은 30 jQuery 응답 레이아웃 플러그인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!