jQuery Slideveal_jquery로 구현된 패널 슬라이딩 측면 표시 효과

우리는 패널의 왼쪽 및 오른쪽 슬라이딩 아웃 및 숨기기 효과를 제어하는 ​​데 사용할 수 있는 jQuery 플러그인인 Slidereveal.js를 사용합니다. 프로젝트 주소: https://github.com/nnattawat/ 슬라이드공개.

사용방법

먼저 페이지에 jquery 라이브러리 파일과 Slideveal.js 플러그인을 로드합니다.

코드 복사 코드는 다음과 같습니다.

그런 다음 사용자 정의된 콘텐츠와 함께 div#slider와 같은 패널 요소를 본문에 배치하고 버튼이나 요소와 같이 패널 호출을 트리거하는 요소를 배치합니다.

코드 복사 코드는 다음과 같습니다.

Helloweba가 여러분을 환영합니다!

왼쪽으로 확장


마지막으로 Slidereveal.js 플러그인을 직접 호출하면 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. $('#slider').slideReveal({ 트리거: $("#trigger") })

옵션 설정

기본적으로 패널은 왼쪽에서 슬라이드 아웃되고 기본 페이지 콘텐츠가 오른쪽으로 '밀어지며' 키보드의 'ESC' 키를 사용하여 패널을 닫을 수 있습니다.

속성	설명	기본값
너비	정수 유형, 패널 너비.	250
푸시	부울, true로 설정하면 패널이 확장될 때 페이지의 기본 콘텐츠가 한쪽으로 '밀어집니다'. false로 설정되면 패널이 페이지의 기본 콘텐츠 위로 확장됩니다.	그렇습니다
위치	문자열, 패널 확장 및 슬라이딩 방향을 설정합니다. "왼쪽" 또는 "오른쪽"으로 설정할 수 있습니다.	"왼쪽"
속도	정수, 패널 확장 속도, 단위: 밀리초.	300
트리거	jQuery DOM 선택기, $("#element")와 같이 패널 표시 및 숨기기를 실행할 수 있는 페이지 요소 설정	정의되지 않음
자동 탈출	부울 유형, 키보드의 ESC 키를 사용하여 확장된 패널을 숨길 수 있는지 여부를 설정합니다.	그렇습니다
상단	정수, 패널과 창 상단 사이의 거리를 설정합니다.	0
쇼	패널이 확장될 때 호출되는 콜백 함수입니다.	-
보여짐	패널이 확장될 때 호출되는 콜백 함수입니다.	-
숨기기	패널이 숨겨져 있을 때 호출되는 콜백 함수입니다.	-
쇼	패널이 숨겨져 있을 때 호출되는 콜백 함수입니다.	-

slidereveal.js 플러그인은 확장 및 숨기기 메서드 호출도 제공합니다.

코드 복사 코드는 다음과 같습니다.

//패널 확장
$('#slider').slideReveal("표시")
//패널 숨기기
$('#slider').slideReveal("숨기기")

위 내용은 이 글에서 공유한 모든 내용입니다. 도움이 필요한 친구들이 와서 참고하면 모든 분들이 jQuery를 익히는 데 도움이 되기를 바랍니다.