封装的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获取变量
Aug 24 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
基于jquery实现图片放大功能
May 07 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
vue页面跳转实现页面缓存操作
Jul 22 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
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python实现处理管道的方法
2015/06/04 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
基于pip install django失败时的解决方法
2018/06/12 Python
python实现录音小程序
2020/10/26 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
python 创建一维的0向量实例
2019/12/02 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
新东网科技Java笔试题
2012/07/13 面试题
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
个人自荐信
2013/12/05 职场文书
农业项目投资意向书
2015/05/09 职场文书
培训感想范文
2015/08/07 职场文书
创业计划书之美甲店
2019/09/20 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL