jQuery의 Scrollify 플러그인은 page_jquery의 다음 노드로 슬라이딩을 구현합니다.-JS 튜토리얼-php.cn

jQuery의 Scrollify 플러그인은 page_jquery의 다음 노드로 슬라이딩을 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:51:31

원래의

1385명이 탐색했습니다.

제품 기능을 소개하기 위해 단일 페이지를 만들어야 하는 경우가 있는데, 단일 페이지에 내용이 많고 페이지가 매우 깁니다. 제품 기능 노드를 빠르게 찾기 위해 js를 사용하여 사용자의 의견을 듣습니다. 휠 이벤트. 사용자가 휠 슬라이드를 실행하거나 제스처를 사용할 때 화면을 터치하고 슬라이드하면 해당 노드를 찾을 수 있습니다. Scrollify라는 jQuery 플러그인이 이를 수행하는 데 도움이 됩니다.

Scrollify를 구현하려면 jQuery 1.6과 버퍼 애니메이션 완화 플러그인이 필요합니다. HTML의 기본 구조는 다음과 같습니다.

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>scrollify</title> 
<!--[if lt IE 9]> 
<script src="html5shiv.min.js"></script> 
<![endif]--> 
<script src="jquery.js"></script> 
<script src="jquery.easing.min.js"></script> 
<script src="jquery.scrollify.min.js"></script> 
<script> 
  $(function() { 
    $.scrollify({ 
      section : "section", 
    }); 
  }); 
</script> 
</head> 
<body> 
  <section></section> 
  <section></section> 
</body> 
</html>

로그인 후 복사

다음은 scrollify의 기본 옵션 구성입니다.

$.scrollify({ 
    section : "section", 
    sectionName : "section-name", 
    easing: "easeOutExpo", 
    scrollSpeed: 1100, 
    offset : 0, 
    scrollbars: true, 
    before:function() {}, 
    after:function() {} 
});

로그인 후 복사

옵션 설명:

섹션: 노드 섹션 선택기
sectionName: 각 섹션 노드에 해당하는 데이터 속성
easing: 버퍼 애니메이션을 정의합니다.
offset: 각 색상 노드의 오프셋을 정의합니다.
scrollbars: 스크롤바 표시 여부.
before: 스크롤이 시작되기 전에 실행되는 콜백 함수입니다.
after: 스크롤이 완료된 후 실행되는 콜백 함수

Scrollify는 다음과 같은 메소드 호출도 제공합니다.