封装的jquery翻页滚动(示例代码)


Posted in Javascript onNovember 18, 2013

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

/**************************************************************************
 discription: 翻页滚动
***************************************************************************/
//插件引入
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:42
  discription: 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:34
 discription: 分页滚动
*/
var _scroll = {
 //滚动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 : {},
 //预处理
 _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);
   //写入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 ;  //当前滚动元素索引
  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');
  } 
 }
}
Javascript 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
js数组依据下标删除元素
Apr 14 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 #Javascript
简单的代码实现jquery定时器
Nov 17 #Javascript
禁止空格提交表单的js代码
Nov 17 #Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 #Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 #Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 #Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 #Javascript
You might like
ADODB的数据库封包程序库
2006/12/31 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php检测url是否存在的方法
2015/04/14 PHP
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
django 创建过滤器的实例详解
2017/08/14 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
python add_argument()用法解析
2020/01/29 Python
Python使用xpath实现图片爬取
2020/09/16 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
小学体育教学反思
2014/01/31 职场文书
代理人委托书
2014/09/16 职场文书
2014年外联部工作总结
2014/11/17 职场文书
商务司机岗位职责
2015/04/10 职场文书
亲戚关系证明
2015/06/24 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android