封装的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资料toString 方法
Mar 13 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 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实现百度网盘图片直链的代码分享
2012/11/01 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
Python 除法小技巧
2008/09/06 Python
python处理PHP数组文本文件实例
2014/09/18 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
升职自荐信范文
2013/10/05 职场文书
大学自荐信
2013/12/12 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
党风廉设责任书
2014/04/16 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
推销搭讪开场白
2015/05/28 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技