Encapsulated jquery page scrolling (sample code)

Encapsulated jquery page scrolling (sample code)_jquery

WBOY

Release： 2016-05-16 17:14:45

Original

1138 people have browsed it

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:

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