jQuery 를 이용한 타임라인 입니다. happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > JQuery > jQuery 를 이용한 타임라인 입니다. 상세정보

클라우드태그

javascript

php

html

asp

mysql

CSS

mobile

jquery

image

slide

占쌨댐옙

메뉴

占쏙옙占쏙옙占쏙옙트

현재접속자 명

jQuery 를 이용한 타임라인 입니다.

해피팀

네티즌

소스분류

JQuery

다운로드 횟수

140 회

간단설명

jQuery를 이용한 타임라인을 만들 수 있습니다. 옵션을 이용해 가로형 타임라인, 세로형 타임라인으로 변경 가능 합니다.

평가하기

jQuery 를 이용한 타임라인을 생성하는 자료를 소개합니다.

소스코드를 다운로드 하시면 폴더내에 index.html 파일이 있고 바로 실행되는 화면을 볼 수 있습니다.

그래서 간단한 구동방식과 옵션에 대해서 설명을 드립니다.

1.Script, Css 를 호출 하세요.

2.레이아웃을 담당하는 구조는 변경하시면 안됩니다.

기본 구조를 참고하여 timeline__content 파트를 추가하거나 삭제하는 정도의 작업만 하셔야 합니다.

(<main 부터 시작해서 </main> 까지는 구조를 유지하시기 바랍니다.)

3.timeline 스크립트를 호출 및 옵션을 설정 하시기 바랍니다.

사용할 수 있는 옵션의 종류는 아래와 같습니다.

1)mode : 'horizontal' 또는 빈값
     horizontal 로 설정하면 가로형 타임라인 입니다.
    mode 설정값이 없거나 설정하지 않을 경우 세로형 타임라인으로 작동 합니다.

2)forceVerticalMode : 300 과 같은 정수값
     자신의 브라우저 해상도 높게 설정하시면 아래의 이미지 처럼 출력 됩니다.
     해당 옵션은 반드시 세로형일 경우에만 적용 됩니다.

3)verticalStartPosition : 'left' 또는 'right'
     left 로 설정하면 첫 레이어가 왼쪽부터 출력되며, right 로 설정하면 첫 레이어가 오른쪽 부터 출력 됩니다.
     해당 옵션은 반드시 세로형일 경우에만 적용 됩니다.

4)visibleItems : 정수 값
     입력한 값만큼 첫페이지에 보여질 타임라인의 수를 설정 합니다.
     기본값은 4로 되어 있으며 4개일 경우 4개의 타임라인 레이어가 보여집니다.

옵션은 간단하지만 있을건 다 있네요.

회사연혁과 같이 시간의 흐름에 따른 정보를 보여주고 싶을 경우 사용하면 좋을듯 합니다. ^^