jQuery의 Scrollify 플러그인은 page_jquery의 다음 노드로 슬라이딩을 구현합니다.
- WBOY원래의
- 2016-05-16 15:51:311322검색
제품 기능을 소개하기 위해 단일 페이지를 만들어야 하는 경우가 있는데, 단일 페이지에 내용이 많고 페이지가 매우 깁니다. 제품 기능 노드를 빠르게 찾기 위해 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는 다음과 같은 메소드 호출도 제공합니다.
$.scrollify("move","#name");
위 코드는 #name 노드로 직접 스크롤할 수 있습니다.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.