>  기사  >  웹 프론트엔드  >  jQuery Slideveal_jquery로 구현된 패널 슬라이딩 측면 표시 효과

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

WBOY
WBOY원래의
2016-05-16 16:09:371739검색

우리는 패널의 왼쪽 및 오른쪽 슬라이딩 아웃 및 숨기기 효과를 제어하는 ​​데 사용할 수 있는 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를 익히는 데 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.