Encapsulated jquery page scrolling (sample code)_jquery

HTML structure:

Copy code The code is as follows:

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

Copy code The code is as follows:

• 1


• 2

Previous page 
 Next page

                                                             class="_rollPar">




JS import file:

author : teresa 2011-3-28

params: Required items for the above HTML structure: related class

_rollParent: the upper-level layer that triggered the event)

_rollSe: scrolling area

_rollPar: scroll element

_scrollNext: Next page button

_scrollPrev: Previous page button

_rollPageSe: paging area

_rollpage: Page number element

data-frequency: scrolling frequency (eg: scrolling 3 elements at a time) -> needs to be marked on the button that triggers the event.

data-pr: cookie prefix.

discription: Read several pieces of data at one time, display only a few pieces, and scroll the page (scroll 3 or n pieces at a time); this method only needs to mark the html element with the required event scrolling effect with the above specified class. Available.

JS initialization method:

Copy code

The code is as follows:

/***************************************************** ************************
description: Page scroll
************************ *************************************************** ********/
//Plug-in introduction
document.write('');
//Function initialization
$(function(){
/*
author: teresa 2011-03-24 14:32:42
description: strollTo init
*/
//Scrolling initial display
_scroll.init();
//Scroll up
$('._scrollPrev').live('click',function(){
_scroll.prev(this);
return false;
});
//Scroll down
$('._scrollNext').live('click',function(){
_scroll.next(this);
return false;
});
});
/*
author: teresa
update_time: 2011-03-24 14:52:34
description: paging scroll
*/
var _scroll = {
//Rolling cookie
config:{
ckname : 'lifedu_rollCur',
ckoptions : {
expires : 3, // in days
path : '/'
}
},

//Initialization
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 : {},
//Preprocessing
_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 Area
_scroll._p.rollPar = _scroll._p.rollSe.find('._rollPar');
_scroll._p.rlen = _scroll._p.rollPar.length;
//Page number area
_scroll._p.rollPageSe = $(o).parents('._rollParent').find('._rollPageSe');
_scroll._p.rollPageLen = _scroll._p.rollPageSe.find('._rollpage') .length;
},

//Scroll down
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 ; //Current scrolling element index
var page = parseInt(json.page) || 0 ; //Current page number
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);
//Write cookie
json.cur = cur;
json.page = page;
var data = JsonToStr(json);
$.cookie(_scroll.config.ckname,data,_scroll.config.ckoptions);
},

//Scroll up
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');
  } 
 }
}

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn