复制代码 代码如下:
ul._rollSe{width:100px;height:300px;over-flow:hidden}
ul._rollSe li._rollPar{height:100px;border:1px solid #369}
复制代码 代码如下:
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
<div>
<a href="#" mce_href="#" data-frequency="3" data-pr="happy">上一页</a>
<a href="#" mce_href="#" data-frequency="3" data-pr="happy">下一页</a>
</div>
<ul>
<?php for($a=1;$a++;$a<10):?>
<li><?php echo $a; ?></li>
<?php endfor;?>
</ul>
</div>
JS引入文件:
<script type="text/javascript" src="https://www.jb51.net/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="https://www.jb51.net/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 : 'https://www.jb51.net/'
}
},
//初始化
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');
}
}
}
您可能感兴趣的文章: