jquery 도구 시리즈 스크롤 가능 learning_jquery

复主代码 代码如下:

1. 제목 예시

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.

60초

2. 제목 예시

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.

80초

3. 제목 예시

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.

100초

4. 제목 예시

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.

120초

5. 제목 예시

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.

140초

该功能是通过jqueryObject.scrollable()방법은 다음과 같습니다.
1. $("div.scrollable").scrollable//该方法显示滚动栏
2. $("div.scrollable").scrollable({config object}) //방법은 일반적으로 사용됩니다.现(只需将)该实现放于jquery'ready方法中即可):

复代码 代码如下:

$("div.scrollable").scrollable({
        size: 3,
        vertical:false,
        //clickable:false,
        loop:true,//设置是否自动跳转（根据间隔时间）
        //interval: 1000,//设置间歇时间间隔
        //speed:2000,
        items: '#thumbs',
        //prev:'.prev',//跳转到上一项
        //next:'.next'//跳转到下一项
        prevPage:'.prev',//跳转到上一页
        nextPage:'.next',//跳转到下一页
        hoverClass: 'hover',
        easing:'linear'
    });    

下面对scrollable配置参数描述如下：
hoverClass　

属性	기본값
사이즈	5	표시되는 스크롤 항목(그림이나 버튼 등) 수를 설정하지만, 전제 조건은 스크롤 항목의 상위 노드가 올바르게 설정되어야 한다는 것입니다(jquery 도구 공식에서 상위 노드의 클래스). 웹 사이트 및 이 기사의 예는 스크롤 가능) CSS 파일의 너비(너비), 그렇지 않으면 여기에서 설정하는 것만으로는 기본적으로 효과가 없습니다. 또한 페이징이 설정된 경우 페이지당 스크롤 항목 수가 여기에 표시됩니다. 즉, "nextPage" 또는 "prePage" 수량을 트리거한 후 스크롤 항목이 이동되었습니다.
세로	거짓	스크롤 항목이 스크롤되는 방향을 설정합니다. false이면 스크롤 항목이 가로로 스크롤되고, 그렇지 않으면 세로로 스크롤됩니다. 세로 스크롤 뿐만 아니라 이 속성을 수정해야 하는 경우 해당 css 파일도 수정해야 합니다.
클릭 가능	맞습니다	스크롤 항목을 클릭하면 스크롤 작업이 실행되는지(즉, 스크롤 항목이 스크롤되는지)입니다.
루프	거짓	마지막 스크롤 항목으로 스크롤할 때 첫 번째 스크롤 항목부터 다시 스크롤할지 여부를 간격(간격이 0이 아님) 속성과 함께 사용해야 합니다.
간격	0	은 스크롤 항목 사이의 자동 전환 간격(밀리초)을 설정하는 데 사용됩니다. 이 속성을 양수 값으로 설정하면 스크롤 항목은 간격 시간에 도달한 후 자동으로 다음 스크롤 항목으로 전환됩니다.
속도	400	자동 스크롤 속도(밀리초)
키보드	맞습니다	이 속성을 true/false로 설정하여 키보드 화살표 키를 차단하려면 /를 활성화하세요. 스크롤 항목에 대한 작업입니다. 이 속성이 true로 설정된 경우 왼쪽 / 오른쪽 화살표 키를 사용하여 가로 스크롤 스크롤 항목을 전환합니다. up / 세로 스크롤 항목을 전환하려면 화살표 키를 누르세요.
아이템	".items"	jquery 선택기를 통해 얻은 스크롤 항목을 포함하는 HTML 요소(또는 이러한 요소)는 스크롤 항목의 상위 노드(HTML 요소) 내에 배치되어야 합니다.
이전	".prev"	스크롤 항목을 앞으로 이동시키는 HTML 요소(예: 앞으로 버튼)를 포함합니다. jquery 선택기를 통해 얻은 html 요소는 스크롤 항목의 상위 노드의 형제 노드여야 합니다. 그러나 선택기가 ID로 html 요소를 가져오면 html 요소는 페이지의 어느 위치에나 배치될 수 있습니다.
다음	".다음"	스크롤 항목을 뒤로 이동하는 HTML 요소(예: 뒤로 버튼)를 포함합니다. jquery 선택기를 통해 얻은 html 요소는 스크롤 항목 상위 노드의 형제 노드여야 합니다. 그러나 선택기가 ID로 html 요소를 가져오면 html 요소는 페이지의 어느 위치에나 배치될 수 있습니다.
이전페이지	".prevPage"	에는 이전 페이지로 이동하는 HTML 요소가 포함되어 있습니다. HTML 요소는 스크롤 항목 상위 노드의 형제 노드여야 합니다. 그러나 선택기가 ID로 html 요소를 가져오면 html 요소는 페이지의 어느 위치에나 배치될 수 있습니다.
다음페이지	".다음페이지"	에는 다음 페이지로 이동하는 HTML 요소가 포함되어 있습니다. html 요소는 스크롤 항목의 상위 노드의 형제 노드여야 합니다. 그러나 선택기가 ID로 html 요소를 가져오면 html 요소는 페이지의 어느 위치에나 배치될 수 있습니다.
네비	".navi"	HTML 요소 페이지 매김 탐색기 포함 - via jquery 선택기 획득; html 요소는 스크롤 항목의 상위 노드의 형제 노드여야 합니다. 그러나 해당 선택기가 id를 통해 html 요소를 가져오면 html 요소는 페이지의 어느 곳에나 배치할 수 있습니다.
네비아이템	"a"	HTML 요소(페이지가 매겨진 탐색 항목) - 페이지가 매겨진 탐색기에 포함됨 - jquery선택기 획득을 통해 ; 이러한 요소는 페이지 매김 탐색에 사용됩니다.
액티브클래스	"활성"	해당 항목의 CSS 클래스 이름은 다음 두 가지 경우에 해당됩니다. a. 스크롤 항목을 클릭했습니다.현재 페이지에 해당하는 페이징 탐색 항목
disabledClass	"비활성화됨"	은 다음/다음페이지(다음 항목/다음 페이지)와 prev/prevPage(이전 항목/이전 페이지)은 사용할 수 없는 것으로 렌더링됩니다. CSS 클래스 이름 . 예를 들어 현재 스크롤 항목 앞에 스크롤 항목이 없으면 prev 요소는 사용할 수 없음(disabled) 상태.
		스크롤 항목 위로 마우스를 이동하면 해당 스크롤 항목의 CSS 클래스 이름을 클래스 .
완화	"스윙"	은 스크롤 항목을 전환할 때 애니메이션 효과를 설정하는 데 사용됩니다. 현재 jquery 도구는 "스윙"과 "선형"이라는 두 가지 애니메이션 효과를 제공합니다. 자세한 애니메이션 효과는 jquery easing 플러그인
API	거짓	이 속성은 시리즈의 juqry 도구와 동일합니다 및 jquery 도구 of 툴팁
onBeforeSeek		이 속성에 의해 설정된 기능은 스크롤 항목이 스크롤되기 전에 실행됩니다. 이 속성 설정 함수가 false를 반환하는 경우 이 함수를 트리거한 스크롤 항목은 스크롤되지 않고 이전 스크롤 항목 위치를 대체합니다. 이 함수는 대상 요소의 인덱스 번호를 포함하는 배열을 반환합니다.
온시크		이 속성에 의해 설정된 기능은 스크롤 항목이 스크롤된 후에 실행됩니다.

스크롤 가능한 메서드와 예제는 jquery tools scrollable(2)을 참조하세요.