封装的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 相关文章推荐
JavaScript 学习笔记(五)
Dec 31 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
js中less常用的方法小结
Aug 09 Javascript
webpack打包js的方法
Mar 12 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
webpack优化的深入理解
Dec 10 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
vue如何截取字符串
May 06 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
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
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
javascript生成随机数的方法
2014/05/16 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python复制文件操作实例详解
2015/11/10 Python
PyQt5每天必学之布局管理
2018/04/19 Python
python实现Virginia无密钥解密
2019/03/20 Python
Python3中的bytes和str类型详解
2019/05/02 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
django使用多个数据库的方法实例
2021/03/04 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
租房协议书范本
2014/04/09 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
争先创优活动总结
2014/08/27 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
师德师风剖析材料
2014/09/30 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android