复制代码 代码如下:
ul._rollse{width:100px;height:300px;over-flow:hidden}
ul._rollse li._rollpar{height:100px;border:1px solid #369}
复制代码 代码如下:
1
2
上一页
下一页
需标注在触发事件的按钮上.
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');
}
}
}