封装的jquery翻页滚动

HTML结构:

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

<div class="_rollParent"> <ul class="_rollPageSe"><li class="_rollpage">1</li><li class="_rollpage">2</li></ul><div> <a href="#" mce_href="#" class="_scrollPrev" data-frequency="3" data-pr="happy">上一页</a> <a href="#" mce_href="#" class="_scrollNext" data-frequency="3" data-pr="happy">下一页</a> </div> <ul class="_rollSe"> <?php for($a=1;$a++;$a<10):?> <li class="_rollPar"><?php echo $a; ?></li> <?php endfor;?> </ul> </div>

 

 

 

JS引入文件:

<script type="text/javascript" src="/js/jquery//scrollTo/jquery.scrollTo-min.js"></script>

 

 

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初始化方法:

/**************************************************************************author: teresaupdate_time: 2011-03-28 14:09:42discription: 翻页滚动***************************************************************************///插件引入document.write('<mce:script type="text/javascript" src="/js/jquery//scrollTo/jquery.scrollTo-min.js" mce_src="js/jquery//scrollTo/jquery.scrollTo-min.js"></mce:script>');//函数初始化$(function(){/*author: teresa 2011-03-24 14:32:42discription: 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:34discription: 分页滚动*/var _scroll = {//滚动cookieconfig:{ckname: 'lifedu_rollCur',ckoptions: {expires : 3,// in dayspath: '/'}},//初始化init:function(){var roll = $('._rollParent');for (i=0;i<roll.length ;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');//cookiejson.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);//写入cookiejson.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);//写入cookiejson.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');}}}