快捷導(dǎo)航

封裝的jquery翻頁(yè)滾動(dòng)(示例代碼)

更新時(shí)間：2013年11月18日 08:58:13 作者：

這篇文章主要介紹了封裝的jquery翻頁(yè)滾動(dòng)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

HTML結(jié)構(gòu):

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

復(fù)制代碼代碼如下:

<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">上一頁(yè)</a>     
  <a href="#" mce_href="#" class="_scrollNext" data-frequency="3" data-pr="happy">下一頁(yè)</a>    
 </div>    
 <ul class="_rollSe">    
  <?php for($a=1;$a++;$a<10):?>    
  <li class="_rollPar"><?php echo $a; ?></li>    
  <?php endfor;?>    
 </ul>    
</div>  

JS引入文件:

author : teresa 2011-3-28

params: 以上HTML結(jié)構(gòu)必填項(xiàng): 有關(guān)的class

_rollParent: 觸發(fā)事件的上級(jí)層)

_rollSe :滾動(dòng)區(qū)域

_rollPar: 滾動(dòng)元素

_scrollNext: 下一頁(yè)按鈕

_scrollPrev: 上一頁(yè)按鈕

_rollPageSe : 分頁(yè)區(qū)域

_rollpage：頁(yè)碼元素

data-frequency: 滾動(dòng)頻率 (eg:一次滾動(dòng)3個(gè)元素) ->需標(biāo)注在觸發(fā)事件的按鈕上.

data-pr: cookie的前綴.

discription: 一次性讀取幾條數(shù)據(jù), 只顯示幾條, 滾動(dòng)翻頁(yè)(一次性滾3條或n條) ; 此方法只需在所需事件滾動(dòng)效果的html元素標(biāo)注以上規(guī)定class便可使用.

JS初始化方法:

復(fù)制代碼代碼如下:

/**************************************************************************
 discription: 翻頁(yè)滾動(dòng)
***************************************************************************/
//插件引入
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>');
//函數(shù)初始化
$(function(){
 /*
  author: teresa 2011-03-24 14:32:42
  discription: strollTo init
 */
 //滾動(dòng)初始顯示
 _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: 分頁(yè)滾動(dòng)
*/
var _scroll = {
 //滾動(dòng)cookie
 config:{
  ckname : 'lifedu_rollCur',
  ckoptions : {
   expires : 3, // in days
   path : '/'
  }
 },

 //初始化
 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');
   //cookie
    json.cur = cur;
    json.page = page;
   var data = JsonToStr(json);
   $.cookie(cookieName,data,_scroll.config.ckoptions);
  }
 }, 

 _p : {},
 //預(yù)處理
 _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');   //滾動(dòng)區(qū)域
  _scroll._p.rollPar = _scroll._p.rollSe.find('._rollPar');  
  _scroll._p.rlen = _scroll._p.rollPar.length;
  //頁(yè)碼區(qū)域
  _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 ;  //當(dāng)前滾動(dòng)元素索引
  var page = parseInt(json.page) || 0 ; //當(dāng)前頁(yè)碼
  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);
   //寫(xiě)入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 ;  //當(dāng)前滾動(dòng)元素索引
  var page = parseInt(json.page) || 0 ; //當(dāng)前頁(yè)碼
  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);
  //寫(xiě)入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');
  } 
 }
}