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

js教程评论793 views阅读模式

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 < last){

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 < 0){cur = 0;}

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');

}

}

}

企鹅博客
  • 本文由 发表于 2020年9月29日 05:58:03
  • 转载请务必保留本文链接:https://www.qieseo.com/420667.html

发表评论