封装的jquery翻页滚动(示例代码)_jquery

HTML结构:

ul._rollSe{width:100px;height:300px;over-flow:hidden}
ul._rollSe li._rollPar{height:100px;border:1px solid #369}

• 1


• 2

上一页
下一页

JS引入文件:

author : teresa 2011-3-28

params: 以上HTML结构必填项: 有关的class

_rollParent: 触发事件的上级层)

_rollSe :滚动区域

_rollPar: 滚动元素

_scrollNext: 下一页按钮

_scrollPrev: 上一页按钮

_rollPageSe : 分页区域

_rollpage： 页码元素

data-frequency: 滚动频率 (eg:一次滚动3个元素) ->需标注在触发事件的按钮上.

data-pr: cookie的前缀.

discription: 一次性读取几条数据, 只显示几条, 滚动翻页(一次性滚3条或n条) ; 此方法只需在所需事件滚动效果的html元素标注以上规定class便可使用.

JS初始化方法:

/**************************************************************************
discription: 翻页滚动
***************************************************************************/
//插件引入
document.write('');
//函数初始化
$(function(){
/*
author: teresa 2011-03-24 14:32:42
discription: strollTo init
*/
//滚动初始显示
_scroll.init();
//上滚
$('._scrollPrev').live('click',function(){
_scroll.prev(this);
return false;
});
//下滚
$('._scrollNext').live('click',function(){
_scroll.next(this);
return false;
});
});
/*
author: teresa
update_time: 2011-03-24 14:52:34
discription: 分页滚动
*/
var _scroll = {
//滚动cookie
config:{
ckname : 'lifedu_rollCur',
ckoptions : {
expires : 3, // in days
path : '/'
}
},

//初始化
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 page = 0;
var rollPar = 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');
//cookie
json.cur = cur;
json.page = 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-frequency'));
_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 - 1;
var n = _scroll._p.rollFrequency;
var cur = parseInt(json.cur) || 0 ; //当前滚动元素索引
var page = parseInt(json.page) || 0 ; //当前页码
if(cur+n cur += n;
page++;
}else if(cur == last){
return;
}else{
cur = last;
page = _scroll._p.rollPageLen - 1;
}
//if last page addClass 'disabled';
$(o).parents('._rollParent').find('._scrollPrev').removeClass('disabled');
if(page == _scroll._p.rollPageLen - 1) {
$(o).addClass('disabled');
}else {
$(o).removeClass('disabled');
}
//scroll
_scroll._p.rollSe.scrollTo(_scroll._p.rollPar.eq(cur),500);
_scroll.goPage(page);
//写入cookie
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 page--;

}else if(cur == 0){
return;
}else {
cur = 0;
page = 0;
}
//if first page addClass 'disabled';
$(o).parents('._rollParent').find('._scrollNext').removeClass('disabled');
if(page == 0) {
$(o).addClass('disabled');
} else {
$(o).removeClass('disabled');
}
//scroll
_scroll._p.rollSe.scrollTo(_scroll._p.rollPar.eq(cur),500);
_scroll.goPage(page);
//写入cookie
json.cur = cur;
json.page = 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');
}
}
}