캡슐화된 jquery 페이지 스크롤(샘플 코드)_jquery
- WBOY원래의
- 2016-05-16 17:14:451145검색
HTML 구조:
코드 복사 코드는 다음과 같습니다.
ul._rollSe{폭:100px;height:300px;over-flow:hidden}
ul._rollSe li._rollPar{height:100px;border:1px solid #369}
코드 복사 코드는 다음과 같습니다.
🎜>
params: 위 HTML 구조의 필수 항목: 관련 클래스
_rollParent: 이벤트를 트리거한 상위 레이어)
/**************************************************** * **********************
설명: 페이지 스크롤
******************** ********* ***************************************** ********** ********/
//플러그인 소개
document.write('
//함수 초기화
$(function(){
/*
작성자: teresa 2011-03-24 14:32:42
설명: walkTo init
*/
//스크롤링 초기 표시
_scroll.init();
//위로 스크롤
$('._scrollPrev').live('click',function(){
_scroll.prev(this);
return false;
});
//아래로 스크롤
$('._scrollNext').live('click',function(){
_scroll.next(this);
return false;
});
});
/*
작성자: teresa
update_time: 2011-03-24 14:52:34
설명: 페이징 스크롤
*/
var _scroll = {
//롤링 쿠키
config:{
ckname : 'lifedu_rollCur',
ckoptions : {
만료: 3, // 일수
경로 : '/'
}
},
//초기화
init:function(){
var Roll = $('._rollParent');
for ( i=0;i {
var cookieName = Roll.eq(i).find('._scrollNext').attr('data-pr') "_lifedu_rollCur" ;
var oStr = $.cookie(_scroll.config.ckname) || '{}'
var json = eval('(' oStr ')');
var cur = 0;
var 페이지 = 0;
varrollPar = Roll.eq(i).find('._rollPar');
roll.eq(i).find('._scrollPrev').addClass('disabled ') ;
roll.eq(i).find('._rollSe').scrollTo(rollPar.eq(cur),50);
roll.eq(i).find('._rollPageSe') .find ('_rollpage').removeClass('ac').eq(page).addClass('ac');
//쿠키
json.cur = cur;
json.page = 페이지 ;
var data = JsonToStr(json);
$.cookie(cookieName,data,_scroll.config.ckoptions);
}
},
_p : {},
//전처리
_pre:function(o){
_scroll.config.ckname = $(o).attr('data-pr') "_lifedu_rollCur";
_scroll._p.rollFrequency =parseInt($(o).attr('data-주파수'));
_scroll._p.rollSe = $(o).parents('._rollParent').find('._rollSe') // 스크롤 영역
_scroll._p.rollPar = _scroll._p.rollSe.find('._rollPar');
_scroll._p.rlen = _scroll._p.rollPar.length;
//페이지 번호 영역
_scroll._p.rollPageSe = $(o).parents('._rollParent').find('._rollPageSe')
_scroll._p.rollPageLen = _scroll._p.rollPageSe.find('._rollpage ') .length;
},
//아래로 스크롤
next:function(o){
_scroll._pre(o);
var oStr = $.cookie( _scroll.config.ckname) || '{}';
var json = eval('(' oStr ')');
var last = _scroll._p.rlen -
var n = _scroll._p.rollFrequency;
var cur = parsInt(json.cur) || 0 ; //현재 스크롤 요소 인덱스
var page = parsInt(json.page) || 0 ; 🎜> if (cur n < last){
cur = n;
페이지 ;
}else if(cur == last){
return;
}else{
cur = last ;
page = _scroll._p.rollPageLen - 1;
}
//마지막 페이지인 경우 addClass 'disabled';
$(o).parents('._rollParent'). find(' ._scrollPrev').removeClass('disabled');
if(page == _scroll._p.rollPageLen - 1) {
$(o).addClass('disabled');
}else {
$(o).removeClass('disabled');
}
//스크롤
_scroll._p.rollSe.scrollTo(_scroll._p.rollPar.eq(cur), 500);
_scroll.goPage(page);
//쿠키 쓰기
json.cur = cur;
json.page = page;
var data = JsonToStr(json);
$.cookie(_scroll.config.ckname,data,_scroll.config.ckoptions);
},
//위로 스크롤
prev:function(o){
/ /lg ('prev');
_scroll._pre(o);
var oStr = $.cookie(_scroll.config.ckname) ||';
var json = eval('(' oStr ')');
var cur =parseInt(json.cur) || 0 ; //当前滚动元素索引
var page =parseInt(json.page) || 0 ; //当前页码
var n = _scroll._p.rollFrequency;
if(cur-n > 0){
if(cur == _scroll._p.rlen - 1){
cur -= 2*n-1;
}else {
cur -= n;
}
if(cur < 0){cur = 0;}
page- -;
}else if(cur == 0){
return;
}else {
cur = 0;
page = 0;
}
// 첫 번째 페이지 addClass 'disabled';
$(o).parents('._rollParent').find('._scrollNext').removeClass('disabled');
if(page == 0) {
$(o).addClass('disabled');
} else {
$(o).removeClass('disabled');
}
//스크롤
_scroll ._p.rollSe.scrollTo(_scroll._p.rollPar.eq(cur),500);
_scroll.goPage(page);
//写入cookie
json.cur = cur;
json.page = 페이지;
var data = JsonToStr(json);
$.cookie(_scroll.config.ckname,data,_scroll.config.ckoptions);
},
goPage: function(p){
//lg(p);
if(_scroll._p.rollPageSe.length != 0){
_scroll._p.rollPageSe.find('._rollpage').removeClass ('ac').eq(p).addClass('ac');
}
}
}
- 1
- 2
params: 위 HTML 구조의 필수 항목: 관련 클래스
_rollParent: 이벤트를 트리거한 상위 레이어)
_rollSe: 스크롤 영역
_rollPar: 스크롤 요소
_scrollNext: 다음 페이지 버튼
_scrollPrev: 이전 페이지 버튼
_rollPageSe: 페이징 영역
_rollpage: 페이지 번호 요소
data-주파수: 스크롤 빈도(예: 한 번에 3개 요소 스크롤) -> 이벤트를 트리거하는 버튼에 표시되어야 합니다.
data-pr: 쿠키 접두사.
설명: 한 번에 여러 데이터 조각을 읽고, 몇 조각만 표시하고, 페이지를 스크롤합니다(한 번에 3개 또는 n개 조각 스크롤). 이 방법은 필요한 이벤트 스크롤 효과로 html 요소만 표시하면 됩니다. 위의 클래스로 가능합니다.
JS 초기화 방법:
코드 복사
코드는 다음과 같습니다.
/**************************************************** * **********************
설명: 페이지 스크롤
******************** ********* ***************************************** ********** ********/
//플러그인 소개
document.write('
//함수 초기화
$(function(){
/*
작성자: teresa 2011-03-24 14:32:42
설명: walkTo init
*/
//스크롤링 초기 표시
_scroll.init();
//위로 스크롤
$('._scrollPrev').live('click',function(){
_scroll.prev(this);
return false;
});
//아래로 스크롤
$('._scrollNext').live('click',function(){
_scroll.next(this);
return false;
});
});
/*
작성자: teresa
update_time: 2011-03-24 14:52:34
설명: 페이징 스크롤
*/
var _scroll = {
//롤링 쿠키
config:{
ckname : 'lifedu_rollCur',
ckoptions : {
만료: 3, // 일수
경로 : '/'
}
},
//초기화
init:function(){
var Roll = $('._rollParent');
for ( i=0;i
var cookieName = Roll.eq(i).find('._scrollNext').attr('data-pr') "_lifedu_rollCur" ;
var oStr = $.cookie(_scroll.config.ckname) || '{}'
var json = eval('(' oStr ')');
var cur = 0;
var 페이지 = 0;
varrollPar = Roll.eq(i).find('._rollPar');
roll.eq(i).find('._scrollPrev').addClass('disabled ') ;
roll.eq(i).find('._rollSe').scrollTo(rollPar.eq(cur),50);
roll.eq(i).find('._rollPageSe') .find ('_rollpage').removeClass('ac').eq(page).addClass('ac');
//쿠키
json.cur = cur;
json.page = 페이지 ;
var data = JsonToStr(json);
$.cookie(cookieName,data,_scroll.config.ckoptions);
}
},
_p : {},
//전처리
_pre:function(o){
_scroll.config.ckname = $(o).attr('data-pr') "_lifedu_rollCur";
_scroll._p.rollFrequency =parseInt($(o).attr('data-주파수'));
_scroll._p.rollSe = $(o).parents('._rollParent').find('._rollSe') // 스크롤 영역
_scroll._p.rollPar = _scroll._p.rollSe.find('._rollPar');
_scroll._p.rlen = _scroll._p.rollPar.length;
//페이지 번호 영역
_scroll._p.rollPageSe = $(o).parents('._rollParent').find('._rollPageSe')
_scroll._p.rollPageLen = _scroll._p.rollPageSe.find('._rollpage ') .length;
},
//아래로 스크롤
next:function(o){
_scroll._pre(o);
var oStr = $.cookie( _scroll.config.ckname) || '{}';
var json = eval('(' oStr ')');
var last = _scroll._p.rlen -
var n = _scroll._p.rollFrequency;
var cur = parsInt(json.cur) || 0 ; //현재 스크롤 요소 인덱스
var page = parsInt(json.page) || 0 ; 🎜> if (cur n < last){
cur = n;
페이지 ;
}else if(cur == last){
return;
}else{
cur = last ;
page = _scroll._p.rollPageLen - 1;
}
//마지막 페이지인 경우 addClass 'disabled';
$(o).parents('._rollParent'). find(' ._scrollPrev').removeClass('disabled');
if(page == _scroll._p.rollPageLen - 1) {
$(o).addClass('disabled');
}else {
$(o).removeClass('disabled');
}
//스크롤
_scroll._p.rollSe.scrollTo(_scroll._p.rollPar.eq(cur), 500);
_scroll.goPage(page);
//쿠키 쓰기
json.cur = cur;
json.page = page;
var data = JsonToStr(json);
$.cookie(_scroll.config.ckname,data,_scroll.config.ckoptions);
},
//위로 스크롤
prev:function(o){
/ /lg ('prev');
_scroll._pre(o);
var oStr = $.cookie(_scroll.config.ckname) ||';
var json = eval('(' oStr ')');
var cur =parseInt(json.cur) || 0 ; //当前滚动元素索引
var page =parseInt(json.page) || 0 ; //当前页码
var n = _scroll._p.rollFrequency;
if(cur-n > 0){
if(cur == _scroll._p.rlen - 1){
cur -= 2*n-1;
}else {
cur -= n;
}
if(cur < 0){cur = 0;}
page- -;
}else if(cur == 0){
return;
}else {
cur = 0;
page = 0;
}
// 첫 번째 페이지 addClass 'disabled';
$(o).parents('._rollParent').find('._scrollNext').removeClass('disabled');
if(page == 0) {
$(o).addClass('disabled');
} else {
$(o).removeClass('disabled');
}
//스크롤
_scroll ._p.rollSe.scrollTo(_scroll._p.rollPar.eq(cur),500);
_scroll.goPage(page);
//写入cookie
json.cur = cur;
json.page = 페이지;
var data = JsonToStr(json);
$.cookie(_scroll.config.ckname,data,_scroll.config.ckoptions);
},
goPage: function(p){
//lg(p);
if(_scroll._p.rollPageSe.length != 0){
_scroll._p.rollPageSe.find('._rollpage').removeClass ('ac').eq(p).addClass('ac');
}
}
}
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.