封裝的jquery翻頁滾動(範例程式碼)

首頁

web前端

js教程

封裝的jquery翻頁滾動(範例程式碼)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:14 PM

jquery翻頁

HTML結構:

複製程式碼程式碼如下:

程式碼如下:ul._rollSe li._rollPar{height:100px;border:1px solid #369}

複製程式碼程式碼如下:

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 */
 (); 
 //上滾
 $('._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 : {
  . '
  }
 },

 //初始化
 init:function(){
  var roll = $('._rollParent');
  var roll = $('._rollParent');
  var roll = $('._rollParent');
;
 ;i  {
   var cookieName = roll.eq(i).find('._scrollNext').attr('data-pr') "_lifedu_rollCur";
 oStr = $.cookie(_scroll.config.ckname) || '{}';  
   var json = eval('(' oStr ')');
   var cur =  0;
 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;
  data = JsonToStr(json);
   $.cookie(cookieName,data,_scroll.config.ckoptions);
  }
 }, 
>預處理
 _pre:function(o){
  _scroll.config.ckname = $(o).attr('data-pr') "_lifedu_rollCur";
 Int _scroll._p.rollFrequency = parseInt _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.rollPageLen = _scroll._p.rollPageSe.find('._rollpage').lengthrollPageSe.find('._rollpage').lengths; 
 },

 //下滾
 next:function(o){
  _scroll._pre(o);
  var oStr = $.cookiep(_roll.config.config(cop. ) || '{}';  
  var json = eval('(' oStr ')');
  var last = _scroll._p.rlen - 1; 
  var n = _scroll._p.rlen - 1; 
  var n = _scroll._p.rollFqure. ;
  var cur = parseInt(json.cur) || 0 ;  //目前捲動元素索引
  var page = parseInt(json.page) || 0 ; //目前頁碼
 n if(curson.page) || 0 ; //目前頁碼
 n    cur = n;
   page ;
  }else if(cur == last){   
  page = _scroll._p.rollPageLen - 1;
  }
  //if last page addClass 'disabled';
  $(o).parents('._rollParent';
  $(o).parents('._rollParent').findrevParent')。 .removeClass('disabled');
  if(page == _scroll._p.rollPageLen - 1) {
   $(o).addClass('disabled) (o).removeClass('disabled');
  }
  //scroll
  _scroll._p.rollSe.scrollTo(_scroll._p.rollPar.eq(cur),500);   //寫入cookie
   json.cur = cur;
   json.page = page;
 _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 ;  //目前捲動元素索引
 .page) || 0 ; //目前頁碼
  var n = _scroll._p.rollFrequency;

  if(cur-n > 0){
   if(cur ====_scroll._p. rlen - 1){
    cur -= 2*n-1;
   }else {
    cur -= n;
   }
 
   頁- -; 

  }else if(cur == 0){   
   return;  }
  // if 第一頁addClass 'disabled';
  $(o).parents('._rollParent').find('._scrollNext').removeClass('disabled');
 if(page == 0) { 
   $(o).addClass('disabled');
  } else {  
   $(o).removeClass('disabled' >  //捲動
  _scroll ._p.rollSe.scrollTo(_scroll._p.rollPar.eq(cur),500);
  _scroll.goPage(page);
 //寫入> json.cur = cur;
   json.page = page;
  var data = JsonToStr(json);
  $.cookie(_scroll.config.ckname,data,_scroll.config。 > },
 goPage : function(p){
  //lg(p);
  if(_scroll._p.rollPageSe.length != 0){
 ('._rollpage').removeClass ('ac').eq(p).addClass('ac');
  } 
 }
}