jQuery Timelinr는 수직 및 수평 타임라인 플러그인을 구현합니다(소스 코드 다운로드 포함)_jquery

jquery.timelinr.js는 매우 멋진 효과를 제공하는 jQuery 타임라인 플러그인입니다. jquery.timelinr은 수평 및 수직 타임라인 효과를 생성하고 자동 재생을 수행할 수 있습니다. 매개변수를 통해 각 타임라인 스위치의 애니메이션 효과를 제어할 수 있습니다.

추천 자료: 기업 개발 타임라인 특수 효과의 간략한 역사를 구현하기 위한 jQuery 소스 코드를 공유했습니다. 인터페이스 표시 효과가 매우 좋습니다.

효과 표시 소스 코드 다운로드

사용방법

이 타임라인 플러그인을 사용하려면 페이지에 jQuery 및 jquery.timelinr.js 파일을 도입해야 합니다.

<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-0.9.x.js"></script>

HTML 구조

타임라인 플러그인의 기본 HTML 구조는 다음과 같습니다.

<div id="timeline">
<ul id="dates">
<li><a href="#">date1</a></li>
<li><a href="#">date2</a></li>
</ul>
<ul id="issues">
<li id="date1">
<p>Lorem ipsum.</p>
</li>
<li id="date2">
<p>Lorem ipsum.</p>
</li>
</ul>
<a href="#" id="next">+</a> <!-- optional -->
<a href="#" id="prev">-</a> <!-- optional -->
</div>

초기화 플러그인

페이지 DOM 요소가 로드된 후 다음 방법을 통해 타임라인 플러그인을 초기화할 수 있습니다.

$(function(){
$().timelinr();
});

구성 매개변수

jquery.timelinr.js 타임라인 플러그인의 구성 매개변수는 다음과 같습니다.

방향: 타임라인의 방향입니다. 선택 값은 수평 | 수직입니다.
ContainerDiv: 타임라인 컨테이너 DIV의 ID 선택기입니다. 기본값: '#timeline'.
datesDiv: 시간을 표시하는 컨테이너의 ID 선택자입니다. 기본값: '#dates'.
daysSelectedClass: 현재 선택된 시간의 클래스입니다. 기본값은 '선택됨'입니다.
dateSpeed: 타임라인의 애니메이션 속도입니다. 100~1000 사이의 값 또는 '느림', '보통', '빠름'. 기본값은 '정상'입니다.
IssuesDiv: 정보 설명 DIV의 ID 선택기입니다. 기본값: '#issues'.
IssueSelectedClass: 현재 선택된 정보가 설명하는 DIV의 클래스입니다. 기본값은 '선택됨'입니다.
IssueSpeed: DIV의 애니메이션 속도를 설명하는 정보입니다. 100~1000 사이의 값 또는 '느림', '보통', '빠름'. 기본값은 '빠름'입니다.
IssueTransparency: 정보가 설명하는 DIV의 투명성입니다. 0-1 사이의 값, 기본값은 0.2입니다.
IssueTransparencySpeed: 투명도 애니메이션의 속도입니다. 값 범위는 100-1000이며 기본값은 500입니다.
prevButton: 앞으로 버튼의 ID 선택기입니다. 기본값: '#prev'.
nextButton: 다음 버튼의 ID 선택기입니다. 기본값: '#다음'.
arrowKeys: 키보드 제어를 허용할지 여부입니다. 기본값: 거짓.
startAt: 시작 인덱스 첨자, 기본값은 1입니다.
autoPlay: 자동으로 재생할지 여부입니다. 기본값은 '거짓'입니다.
autoPlayDirection: 자동 재생 방향입니다. 선택적 값은 다음과 같습니다. 앞으로 | 뒤로. 기본값은 '앞으로'입니다.
autoPlayPause: 자동재생 간격입니다. 정수 값, 1000 = 1초, 기본값은 2000입니다.
jquery.timelinr.js 타임라인 플러그인의 github 주소는 다음과 같습니다: https://github.com/juanbrujo/jQuery-Timelinr

위는 수직 및 수평 타임라인 플러그인의 jQuery Timelinr 구현에 대한 내용입니다. 모든 분들께 도움이 되기를 바랍니다.