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');
}
}
}